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 @@

Links

Previous WCCG Report(s)
2021
GitHub issues:
-
---
+
WICG/webcomponents#468
Browser positions:
-
---
+
Chrome (Shipped)
+
Mozilla (Shipped)
+
Safari

Description

-

---

+

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.

Status

Initial API Summary/Quick API Proposal

-

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];
+        

Key Scenarios

-

---

+

Concerns

- +

From their standards position tracker, Safari has highlighted some of the following concerns:

+ +

Dissenting Opinion

@@ -464,7 +486,8 @@

Dissenting Opinion

Related Specs