Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Constructable Stylesheets #50

Merged
merged 3 commits into from
Sep 4, 2022
Merged

Constructable Stylesheets #50

Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e78e715
constructable stylesheets initial draft
thescientist13 Aug 28, 2022
8bde459
fix build for invalid HTML
thescientist13 Aug 28, 2022
89dd61b
Update reports/2022.html
thescientist13 Sep 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 33 additions & 10 deletions reports/2022.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -426,34 +426,56 @@ <h3>Links</h3>
<dt>Previous WCCG Report(s)</dt>
<dd><a href="https://w3c.github.io/webcomponents-cg/index.html#constructable-stylesheets-adoptedstylesheets">2021</a></dd>
<dt>GitHub issues:</dt>
<dd>---</dd>
<dd><a href="https://github.com/WICG/webcomponents/issues/468">WICG/webcomponents#468</a></dd>
<dt>Browser positions:</dt>
<dd>---</dd>
<dd><a href="https://chromestatus.com/feature/5394843094220800" target="_blank">Chrome (Shipped)</a></dd>
<dd><a href="https://github.com/mozilla/standards-positions/issues/103" target="_blank">Mozilla (Shipped)</a></dd>
<dd><a href="https://github.com/WebKit/standards-positions/issues/42" target="_blank">Safari</a></dd>
</dl>
</section>
<section>
<h3>Description</h3>
<p>---</p>
<p><a href="https://wicg.github.io/construct-stylesheets/" target="_blank">Constructable Stylesheets</a> and adoptedStyleSheets enable adding styles directly to 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.</p>
thescientist13 marked this conversation as resolved.
Show resolved Hide resolved
</section>
<section>
<h3>Status</h3>
<ul>
<li>---</li>
<li>Partial consensus; shipped in both <a href="https://web.dev/constructable-stylesheets/" target="_blank">Chrome</a> and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1520690" target="_blank">Firefox</a></li>
</ul>
</section>
<section>
<h3>Initial API Summary/Quick API Proposal</h3>
<p>Summary or proposal based on current status; paragraph(s) and code.</p>
<p>The following is <a href="https://web.dev/constructable-stylesheets/#using-constructed-stylesheets" target="_blank">an example</a> of what this would look like in practice.</p>
<pre>
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];
</pre>
</section>
<section>
<h3>Key Scenarios</h3>
<p>---</p>
<ul>
<li>There is no effective way to share styles across components while allowing them to be centrally modified.</li>
<li>Creating `&lt;style&gt;` elements for each style used in each shadow root has a measurable performance overhead.</li>
<li>CSS Module Scripts, another critical feature, depends on constructible stylesheets.</li>
</ul>
</section>
<section>
<h3>Concerns</h3>
<ul>
<li>---</li>
</ul>
<p>From their standards position tracker, Safari has highlighted some of the following concerns:</p>
<ul>
<li>Issues related to <a href="https://github.com/WICG/construct-stylesheets/issues/45" target="_blank">race conditions</a> with adopting stylesheets and if the adoptedStyleSheets array should be directly mutable or not</li>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I thought this one had been worked out... 🫠

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah. I could have read it wrong or maybe a resolution wasn't communicated? So feel free keep me honest here but those were the breadcrumbs I followed from the Safari positions repo. 👀

<li>There is concern that it is <a href="https://github.com/whatwg/dom/pull/892#pullrequestreview-593774559" target="_blank">incompatible with Declarative Shadow DOM</a>.</li>
<li>Outstanding questions around <a href="https://github.com/WICG/webcomponents/issues/870" target="_blank"><em>@import</em> statements in CSS Modules</a>.</li>
</ul>
</p>
</section>
<section>
<h3>Dissenting Opinion</h3>
Expand All @@ -464,7 +486,8 @@ <h3>Dissenting Opinion</h3>
<section>
<h3>Related Specs</h3>
<ul>
<li>---</li>
<li><a href="/#declarative-shadow-dom" target="_blank">Declarative Shadow DOM</a></li>
<li><a href="/#css-module-scripts" target="_blank">CSS Module Scripts</a></li>
</ul>
</section>
<section>
Expand Down