From 2fddb0b0d82459641e74114ffc806a4589f1035b Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Sun, 4 Sep 2022 16:31:07 +0000 Subject: [PATCH] Merge pull request #50 from w3c/report-2022-constructable-stylesheets SHA: 015934f873003920533b6991adaec378f10ce2f7 Reason: push, by @thescientist13 Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- 2022.html | 47 ++++++++++++++++++++++++++++++++++------------- 1 file changed, 34 insertions(+), 13 deletions(-) diff --git a/2022.html b/2022.html index c4e704b..d0e4a57 100644 --- a/2022.html +++ b/2022.html @@ -150,8 +150,8 @@ "xref": "web-platform", "group": "webcomponents", "tocIntroductory": true, - "publishISODate": "2022-09-02T00:00:00.000Z", - "generatedSubtitle": "Draft Community Group Report 02 September 2022" + "publishISODate": "2022-09-04T00:00:00.000Z", + "generatedSubtitle": "Draft Community Group Report 04 September 2022" }
@@ -159,7 +159,7 @@

Web Components Community Group: 2022 Spec/API status

Draft Community Group Report - +

@@ -647,34 +647,54 @@

Web Components Community Group: 2022 Spec/API statu
Previous WCCG Report(s)
2021
GitHub issues:
-
---
+
WICG/webcomponents#468
Browser positions:
-
---
+
Chrome (Shipped)
+
Mozilla (Shipped)
+
Safari

4.2 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.

4.3 Status

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

4.5 Key Scenarios

-

---

+
    +
  • There is no effective way to share styles across components while allowing them to be centrally modified.
    • +
  • Creating <style> elements for each style used in each shadow root has a measurable performance overhead.
    • +
  • CSS Module Scripts, another critical feature, depends on constructible stylesheets.
    • +

4.6 Concerns

-
    -
  • ---
    • -
+

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

+ +

4.7 Dissenting Opinion

@@ -685,7 +705,8 @@

Web Components Community Group: 2022 Spec/API statu

4.9 Open Questions