From 988ddc61780f8df6d0b0cafd5f9e3cae210afb91 Mon Sep 17 00:00:00 2001 From: phumai98 Date: Thu, 19 Sep 2024 22:33:36 -0700 Subject: [PATCH 01/22] Create explainer.md --- ShadowDOM/explainer.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 ShadowDOM/explainer.md diff --git a/ShadowDOM/explainer.md b/ShadowDOM/explainer.md new file mode 100644 index 00000000..8b137891 --- /dev/null +++ b/ShadowDOM/explainer.md @@ -0,0 +1 @@ + From 6fdfcc8250e08123cf817d144d51f9d7c90d3721 Mon Sep 17 00:00:00 2001 From: phumai98 Date: Thu, 19 Sep 2024 22:38:06 -0700 Subject: [PATCH 02/22] Update explainer.md --- ShadowDOM/explainer.md | 400 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 400 insertions(+) diff --git a/ShadowDOM/explainer.md b/ShadowDOM/explainer.md index 8b137891..66750870 100644 --- a/ShadowDOM/explainer.md +++ b/ShadowDOM/explainer.md @@ -1 +1,401 @@ +# Sharing styles in shadow DOM +## Authors + +- Kurt Catti-Schmidt +- Daniel Clark +- Tien Mai + +## Participate +- [Discussion forum](https://github.com/WICG/webcomponents/issues/939) + +## Status of this Document + +This document is intended as a starting point for engaging the community and +standards bodies in developing collaborative solutions fit for standardization. +As the solutions to problems described in this document progress along the +standards-track, we will retain this document as an archive and use this section +to keep the community up-to-date with the most current standards venue and +content location of future work and discussions. + +* This document status: **Active** +* Expected venue: [HTML Working Group](https://www.w3.org/groups/wg/htmlwg/) +* Current version: this document +## Table of Contents + - [Authors](#authors) + - [Participate](#participate) + - [Status of this Document](#status-of-this-document) + - [Background](#background) + - [Problem](#problem) + - [Goals](#goals) + - [Out of scope](#out-of-scope) + - [Use case](#use-case) + - [Search result page](#search-result-page) + - [Media site control widgets](#media-site-control-widgets) + - [Anywhere web components are used](#anywhere-web-components-are-used) + - [Alternatives to using style in DSD](#alternatives-to-using-style-in-dsd) + - [Proposal: Inline, declarative SS module scripts](#proposal-inline-declarative-css-module-scripts) + - [Alternate proposals](#alternate-proposals) + - [Summary](#summary) + - [Open issues](#open-issues) + - [References and acknowledgements](#references-and-acknowledgements) + + +## Background +With the use of web components in web development, web authors often encounter challenges in managing styles, such as distributing global styles into shadow roots and sharing styles across different shadow roots. Markup-based shadow DOM, or [Declarative shadow DOM (DSD)](https://developer.chrome.com/docs/css-ui/declarative-shadow-dom), is a new concept that makes it easier and more efficient to create a shadow DOM definition directly in HTML, without needing JavaScript for setup. [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM) provides isolation for CSS, JavaScript, and HTML. Each shadow root has its own separate scope, which means styles defined inside one shadow root do not affect another or the main document. + +## Problem +Declarative Shadow DOM doesn't have an equivalent to Imperative Shadow DOM’s `adoptedStylesheets` attribute, which is a gap in the currently exposed functionality. As a result, any complex styling that would normally be accomplished via shared stylesheets will either require JavaScript (which goes against the goal of markup-based shadow DOM) or will require a tag referencing an external file. + +Relying on JavaScript for styling is not ideal for DSD for several reasons: +* One of the main goals of DSD is to not rely on JavaScript [for performance and accessibility purposes](https://web.dev/articles/declarative-shadow-dom). +* Adding stylesheets via script may cause an FOUC (Flash of Unstyled Content). +* The current `adoptedStylesheets` attribute only supports Constructable Stylesheets, not inline stylesheets or stylesheets from tags [(note that the working groups have recently decided to lift this restriction)](https://github.com/w3c/csswg-drafts/issues/10013#issuecomment-2165396092). + +While referencing an external file via the tag for shared styles in DSD works today [(and is currently recommended by DSD implementors)](https://web.dev/articles/declarative-shadow-dom#server-rendering_with_style), it is not ideal for several reasons: +* If the linked stylesheet has not been downloaded and parsed, there may be an FOUC. +* External stylesheets are considered “render blocking”, and Google’s Lighthouse guidelines for high-performance web content recommends [using inline styles instead](https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources#how_to_eliminate_render-blocking_stylesheets). +* Google’s Lighthouse guidelines recommend minimizing network requests for best performance. Stylesheets included via tags are always external resources that may initiate a network request (note that the network cache mitigates this for repeated requests to the same file). + +This example shows how a developer might use DSD to initialize a shadow root without JavaScript. + +```html + + + +``` +While this approach is acceptable for a single component, a rich web application may define many `