diff --git a/reports/2022.html b/reports/2022.html index 7b029e0..9b8b3c5 100644 --- a/reports/2022.html +++ b/reports/2022.html @@ -426,34 +426,56 @@
---
+Constructable Stylesheets and adoptedStyleSheets enable adding styles directly to DOM trees, e.g. `document` and shadow roots, without creating new DOM elements. Because a single stylesheet object can be adopted by multiple scopes, it also allows sharing of styles that can be centrally modified.
Summary or proposal based on current status; paragraph(s) and code.
+The following is an example of what this would look like in practice.
++ const sheet = new CSSStyleSheet(); + sheet.replaceSync('a { color: red; }'); + + // Apply the stylesheet to a document: + document.adoptedStyleSheets = [sheet]; + + // Apply the stylesheet to a Shadow Root: + const node = document.createElement('div'); + const shadow = node.attachShadow({ mode: 'open' }); + shadow.adoptedStyleSheets = [sheet]; +
---
+From their standards position tracker, Safari has highlighted some of the following concerns:
+