5 ms·
There are a lot of things you can do with shadow DOM that you can’t with iframes or scope/donut selectors: - transclude other elements (technically you can wit
by jakelazaroff 3y ago
There are a lot of things you can do with shadow DOM that you can’t with iframes or scope/donut selectors:
- transclude other elements (technically you can with iframes, but hopefully it’s clear why making something like this breadcrumb component would be extremely awkward [1])
- control and react to the display of child elements via <slot>s
- call methods on custom element objects
etc etc. It’s fine if it doesn’t solve any problems you personally have, but that doesn’t mean it’s not useful.
[1] https://shoelace.style/components/breadcrumb https://shoelace.style/components/breadcrumb
- earthboundkid 3y agoTransclusion can totally be done with CSS now. That’s a donut selector. The other things are just plain old JavaScript and have nothing to do with Shadow DOM. Yes, they can be done with customElement, but they can also just be done without it.
- jakelazaroff 3y agoI think I’m going to bow out because it’s clear this discussion isn’t going anywhere, but you should look up what transclusion means because it makes no sense to say that you can do it in CSS.
- earthboundkid 3y agoTransclusion means that .a in this can escape the Shadow DOM: <my-element><div class="a">Transcluded content</div></my-element> To do the same thing in CSS you would do <div class="myelement"><div class="slot"><div class="a">Transcluded content</div></div></div> @scope (.myelement) to (.slot) { /* rules that apply to .myelement but not .a */ }).