If you are used to BEM then that probably is your preference.
But in Web Components
section .card > .title { ... }
can become
.title { ... }
Yes, global can't style shadowDOM,
but many overlook shadowDOM will not style global either
If you are used to BEM then that probably is your preference.
But in Web Components
section .card > .title { ... }
can become
.title { ... }
Yes, global can't style shadowDOM,
but many overlook shadowDOM will not style global either
its fully optional, you are not forged to use it.
Although, alas, tools like Lit make it the default.
its fully optional, you are not forged to use it.
Although, alas, tools like Lit make it the default.
:not:defined { display: none }
to prevent FOUCs or any other weird reason.
Because DSD - Declarative ShadowDOM
creates *undefined* Custom Elements
The Custom Elements JavaScript *API* makes them :defined
:not:defined { display: none }
to prevent FOUCs or any other weird reason.
Because DSD - Declarative ShadowDOM
creates *undefined* Custom Elements
The Custom Elements JavaScript *API* makes them :defined
That's is like calling everyone Joe.
* shadowDOM attached to a <div> is *not* using Custom Elements
* Customized Built-In Elements are *not* Custom Elements
Only tags with a hyphen *are* Custom Elements (even without using JavaScript)
That's is like calling everyone Joe.
* shadowDOM attached to a <div> is *not* using Custom Elements
* Customized Built-In Elements are *not* Custom Elements
Only tags with a hyphen *are* Custom Elements (even without using JavaScript)
This one last commit makes the lights more declarative:
This one last commit makes the lights more declarative:
(I like calling them custom elements (even as a bag for all the features like ShadowDOM, slots, scoped CSS, etc), because technically React/Vue/Svelte/Solid/Angular/Ember components are all "web components".
(I like calling them custom elements (even as a bag for all the features like ShadowDOM, slots, scoped CSS, etc), because technically React/Vue/Svelte/Solid/Angular/Ember components are all "web components".
Also, this is the first I’m hearing about StyleX and people moving away from Tailwind, what did I miss? Isn’t StyleX that old Next.js thingy that didn’t quite make it?
Also, this is the first I’m hearing about StyleX and people moving away from Tailwind, what did I miss? Isn’t StyleX that old Next.js thingy that didn’t quite make it?
Here is the "closed" <video> DOM in Chromium and FireFox
I presume the "closed" option for us mortal developers
is a relic of these earlier developments
Hardly serves a purpose if you can download the source and just do a replace to "open"
Here is the "closed" <video> DOM in Chromium and FireFox
I presume the "closed" option for us mortal developers
is a relic of these earlier developments
Hardly serves a purpose if you can download the source and just do a replace to "open"
It has shadowDOM and HTML content us mortals can not access, like a mode:"closed" Web Component.
Take a peek inside and you will see each vendor implemented it different.
It has shadowDOM and HTML content us mortals can not access, like a mode:"closed" Web Component.
Take a peek inside and you will see each vendor implemented it different.
since you are already "in" shadowDOM you can query:
𝘥𝘰𝘤𝘶𝘮𝘦𝘯𝘵
.𝘲𝘶𝘦𝘳𝘺𝘚𝘦𝘭𝘦𝘤𝘵𝘰𝘳("𝘮𝘺𝘦𝘭𝘦𝘮𝘦𝘯𝘵")
.𝘴𝘩𝘢𝘥𝘰𝘸𝘙𝘰𝘰𝘵
.𝘲𝘶𝘦𝘳𝘺𝘚𝘦𝘭𝘦𝘤𝘵𝘰𝘳(`[𝘱𝘢𝘳𝘵="𝘵𝘩𝘪𝘯𝘨"]`)
since you are already "in" shadowDOM you can query:
𝘥𝘰𝘤𝘶𝘮𝘦𝘯𝘵
.𝘲𝘶𝘦𝘳𝘺𝘚𝘦𝘭𝘦𝘤𝘵𝘰𝘳("𝘮𝘺𝘦𝘭𝘦𝘮𝘦𝘯𝘵")
.𝘴𝘩𝘢𝘥𝘰𝘸𝘙𝘰𝘰𝘵
.𝘲𝘶𝘦𝘳𝘺𝘚𝘦𝘭𝘦𝘤𝘵𝘰𝘳(`[𝘱𝘢𝘳𝘵="𝘵𝘩𝘪𝘯𝘨"]`)
Perhaps we need a definitive and somewhat official guide, that makes it crystal clear which patterns to use for varying scenarios, with the tradeoffs of each pattern, and making it clear ShadowDOM is not required.
Perhaps we need a definitive and somewhat official guide, that makes it crystal clear which patterns to use for varying scenarios, with the tradeoffs of each pattern, and making it clear ShadowDOM is not required.
I use Custom Element *with* ShadowDOM the majority of the time.
I use Custom Element *with* ShadowDOM the majority of the time.
<slots> elements alone are the main reason to use ShadowDOM.
<slots> elements alone are the main reason to use ShadowDOM.