4 ms·

Does any major frontend framework plan to use these native APIs? Seems like a good opportunity to enhance the performance of web apps to me.

acjohnson55 8y ago
The way I see Shadow DOM is that it's an environment for an encapsulated web component or embedded app to run within. Most frameworks can be mounted to the DOM at a single spot, so should be pretty compatible, I would think. There are also a lot of existing web components libraries that have been developed in anticipation of first class support for Shadow DOM in all browsers. See https://en.m.wikipedia.org/wiki/Web_Components#Libraries https://en.m.wikipedia.org/wiki/Web_Components#Libraries
Vinnl 8y ago
IIRC, Angular already ships with its own similar polyfill, so I'd guess it tries to fallback to native if possible. React doesn't really concern itself with styles anyway, though I guess they might need/want to make sure they're not standing in the way of using the shadow DOM. Of the less-major ones, I only know that Polymer uses it - which makes sense, since this is one of the APIs it was explicitly created to push.
eat_veggies 8y ago
Polymer is pretty integrated with shadow dom iirc, although last time I used it I had to use a bunch of polyfills.
- spankalee 8y ago
  You don't need any polyfills on Chrome, Safari, Opera and soon Firefox obviously. Edge is the only holdout.
brylie 8y ago
Perhaps not as 'major', but Aurelia is intentionally aligned with web components and other standards: https://aurelia.io/ https://aurelia.io/
- hoppelhase 8y ago
  Is it still a thing?
krishanath 8y ago
Not a major framework, but UIBuilder lets you use Web Components using JSX, just like React: https://github.com/wisercoder/uibuilder https://github.com/wisercoder/uibuilder
d2kx 8y ago
Angular supports this for quite some time.
- ivankolev 8y ago
  It does, but emulated by default, you have to explicitly add ViewEncapsulation.NATIVE to your component decorator, or NONE if you wish/are forced to disable it.
warpech 8y ago
For custom elements, here's a list at https://custom-elements-everywhere.com/ https://custom-elements-everywhere.com/

acjohnson55 8y ago

The way I see Shadow DOM is that it's an environment for an encapsulated web component or embedded app to run within. Most frameworks can be mounted to the DOM at a single spot, so should be pretty compatible, I would think. There are also a lot of existing web components libraries that have been developed in anticipation of first class support for Shadow DOM in all browsers. See https://en.m.wikipedia.org/wiki/Web_Components#Libraries https://en.m.wikipedia.org/wiki/Web_Components#Libraries

Vinnl 8y ago

IIRC, Angular already ships with its own similar polyfill, so I'd guess it tries to fallback to native if possible. React doesn't really concern itself with styles anyway, though I guess they might need/want to make sure they're not standing in the way of using the shadow DOM. Of the less-major ones, I only know that Polymer uses it - which makes sense, since this is one of the APIs it was explicitly created to push.

eat_veggies 8y ago

Polymer is pretty integrated with shadow dom iirc, although last time I used it I had to use a bunch of polyfills.

spankalee 8y ago
You don't need any polyfills on Chrome, Safari, Opera and soon Firefox obviously. Edge is the only holdout.

brylie 8y ago

Perhaps not as 'major', but Aurelia is intentionally aligned with web components and other standards: https://aurelia.io/ https://aurelia.io/

hoppelhase 8y ago
Is it still a thing?

krishanath 8y ago

Not a major framework, but UIBuilder lets you use Web Components using JSX, just like React: https://github.com/wisercoder/uibuilder https://github.com/wisercoder/uibuilder

d2kx 8y ago

Angular supports this for quite some time.

ivankolev 8y ago
It does, but emulated by default, you have to explicitly add ViewEncapsulation.NATIVE to your component decorator, or NONE if you wish/are forced to disable it.

warpech 8y ago

For custom elements, here's a list at https://custom-elements-everywhere.com/ https://custom-elements-everywhere.com/