Shadow DOM

[LeaVerou]

Encapsulate elements not visible from the outside, and style them with CSS not affecting the rest of the page.

Code sample

this.shadowRoot = this.attachShadow({mode: "open"});

MDN URL:

https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM

Specification URL:

No response

Any other links?

No response

How stable is this feature?

Stable (Widely supported for several years)

Type of feature

JS API

What focus area does this feature fall under?

Making Web Components

Details

We should probably ask about Shadow DOM as a whole too.

[mfreed7]

I think we should dig into the various types of encapsulation provided by shadow DOM, and ask which are good/bad/problematic:

• Style isolation
• Javascript (e.g. querySelector) isolation
• event retargeting
• custom element registration scope
• open vs. closed root differences (e.g. should any of the above be different for open vs. closed)

The above is a rambling list - the point is that we should ask some questions about encapsulation.

[mfreed7]

Ahh, sorry about that. The main one that has a good link with some discussion is "open stylable shadow roots": WICG/webcomponents#909

@justinfagnani might have more/better resources and a phrasing for a question.

[LeaVerou]

Hi Mason, I have actually seen this thread before :) I was asking about pointers to each of the specific features you mentioned (e.g. explainers, specs, whatever exists).

[mfreed7]

Hmm, all of them are just parts of the landed spec/feature. I've just always heard grumbling about wanting to "undo" some part of the feature, such as open up styling, or allow querySelector to work across roots, etc. Perhaps there's not a question here after all. But my curiosity has always been whether these are problems in practice, and if so, which one(s) are most pressing.

Perhaps this isn't a question in the style of State of HTML, which is more "have you heard about this thing? That thing?". So ok to drop this if needed.

[justinfagnani]

re: explainers for each - I agree with Mason's take that this type of question is about whether the current scoping is too strict or coupling too many different types of encapsulation (DOM, events, style, upper bounds and lower bounds). So there aren't really explainers - just common complaints.

If this isn't appropriate for State of HTML, I'd definitely love to see this asked to a broad audience somewhere!

[LeaVerou]

I think this might be too low level for this survey. However, we already have two separate sections about WC ("Using Web Components" and "Making Web Components") with targeted pain points questions at the end:

• What are your biggest pain points around using web components that others have made?
• What are your biggest pain points around making web components?

Hopefully these concerns will come up there?