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:
+