Use of shadow DOM
Once we handle #853 we can investigate the support of the ShadowDom for better encapsulation of styles/JS/templates both in our components and when building an application using them.
Dependency on a rework of the router, as the router is based on the show/hide of the actual DOM. We may investigate what vue-router or react-router are doing to enable proper routing management with their virtual-dom/shadow-dom implementations.
Issue for that to be created in the solid-router repository and to be linked here.
Activity
- Sylvain Le Bon added ~277 label
added ~277 label
- Maintainer
Widgets versus resources ( LDP-Elements/LDP-Div ).
I've created a fairly complete example using most of the features of the custom elements: https://plnkr.co/edit/XYArLnqGVyzR9scm
some interesting things:
- slots allow to place elements in a custom-element even if it has shadow-dom (useful for parents widget like sib-list)
- we can give the application developer access to the shadow dom selectors with ::part()
- we can use the child dom as parameters (like
<video>
use<source>
as settings)
what do you think?
- Maintainer
-
I didn't know we could use slots, but I find it very interesting. There is probably plenty of use case for us (it works also without the Shadow DOM I guess?).
-
It's also interesting to note that the slot is rendered in the component, but outside the
shadow-root
, that's why we can access it to style it. However, it's complicated to style elements in the component from the parent document. -
Interesting use of the child DOM, might be useful as well
The main issue I can see currently is to allow the developer to style the component properly. I'll look into it
-
- Author Maintainer
I don't think they work without shadow Dom, because they map the real DOM to the shadow.
Yes styling is definitely the main issue.
Thanks a lot!
- Maintainer
after some more investigations, I think the best (and only?) ways for us to provide some styling options for a shadow Dom element are:
- using css variables
- using slots to expose styleable content
- provide a way to import custom CSS in the web component DOM
- Author Maintainer
Could you make a call with some users, like @Marjolaine or @jbpasquier , to see what they think?
- Maintainer
Actually it seems that there is a cool other way to style ShadowDOM, the use of
::part
. Safari announced the support recently so it is useable in all mains browsers: https://developer.mozilla.org/fr/docs/Web/CSS/::partHere is an article which explains how to use it: https://css-tricks.com/styling-in-the-shadow-dom-with-css-shadow-parts/
And here is an experiment: https://plnkr.co/edit/z9dndeqBu4bkF1kD
We can choose to expose some parts of the shadow DOM to styling by setting a
part
attribute. The developer can then access it by doing:sib-form::part(submitButton)
- Maintainer
Yes and the support for part looks really fine even though it's still a draft.
If we have that it will help already.
- Maintainer
But I think this attribute works only with shadowDOM. So we would have to try to make 1 component using it and see what happens
- Author Maintainer
At least we need to explore Shadow Dom and decide on best practices about where to use it.
- Please register or sign in to reply
- Benoit Alessandroni added blox 2.0 label
added blox 2.0 label
- Benoit Alessandroni changed milestone to %0.20
changed milestone to %0.20
- Benoit Alessandroni changed the description
changed the description
- Maintainer
- Benoit Alessandroni added #859 as child task
added #859 as child task
- Benoit Alessandroni added #860 as child task
added #860 as child task
- Benoit Alessandroni added #861 as child task
added #861 as child task
- Benoit Alessandroni added #862 as child task
added #862 as child task
- Maintainer
Could we document the advantages and drawbacks of improving our support/usage of the shadowDOM ?