
Shadow DOM enabled in Firefox nightly - velmu
https://bugzilla.mozilla.org/1460069
======
arenaninja
Has anyone here had an excellent experience with webcomponents? I used them on
a project recently and it felt subpar to React components, partially due to
the number of immature libraries we needed to use to account for incomplete
support (we were porting React components to WebComponents)

I'm hopeful that the day will come when WebComponents provide a superior
experience to the megabytes of JS that are imposed on a user's experience, but
seeing how long it took IE to die I'm pessimistic

~~~
Vinnl
They solve different (and even complementary) use cases. Web Components allow
you to easily share things like date pickers without having to wait for those
things to standardise and be implemented in browsers, whereas React gives you
a clean and easy to follow application architecture where your view is simply
the output of a function that takes application state as input.

------
NVRM
Currently using the similar `DOMImplementation.createHTMLDocument()`:
[https://developer.mozilla.org/en-
US/docs/Web/API/DOMImplemen...](https://developer.mozilla.org/en-
US/docs/Web/API/DOMImplementation/createHTMLDocument) : Styles and scripts of
the main document doesn't apply to it. It allow to do some tricky stuffs, the
main doc can retrieve values of sub documents, and we aren't forced to display
it. It can act in the shadow too, allowing parallel computing. Is it the great
beginning of «in browser javascript multi threading»?

~~~
Arnavion
>Styles and scripts of the main document doesn't apply to it.

Ugh. I look forward to being unable to use custom JS / CSS to fix websites
that have banners that cover half the page, or `max-width`s on their body to
constrain themselves to tablet sizes on desktop monitors...

~~~
RobertRoberts
I had never considered this before. Would Shadow DOM make browser plugins like
Stylish useless against horribly layed out websites?

There has to be a work around for this issue...

~~~
rictic
Still definitely possible for browser plugins to do anything they want to
Shadow DOM. For open shadow roots, javascript can crawl them. If handling
closed shadow trees is necessary, just patch Element.prototype.attachShadow
and keep a WeakMap from the Element instance to its shadow root.

------
hoppelhase
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.

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

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

------
xab9
With /deep/ deprecated and css @apply nowhere in sight I'm not sure I like
styling stuff inside shadow boxes...

~~~
spankalee
CSS Shadow Parts, aka ::part and ::theme is the answer there:
[https://meowni.ca/posts/part-theme-explainer/](https://meowni.ca/posts/part-
theme-explainer/)

~~~
xab9
Thanks, didn't know about part and theme - and again, I'm not sure if I like
it. For example angular puts [innerHTML] into a shadow container - let's
assume we are talking about arbitrary localized text from a cms, heavily
sanitized, with basic html elements allowed only. With both deep and apply
going the way of the dodo, I'm not sure when will we have part and theme
support, but heck, this again, just like css variables, need an effort on the
3rd party's side (to add part descriptors and chain prefixers - gosh, those
prefixers sure smell bemish), which may or may not happen.

All I need is a fail safe way of modifying style inside shadow containers
without the 3rd party adding support for it (right now we are modifying an
angular material based site, because, you know, before the release the most
important thing is that how these elements animate or how their drop shadow
look), fail safe meaning that it should not be possible to accidentally
overwrite stuff inside shadows (like generic link styling).

But probably it's a conflict of interest... everyone wants perfectly contained
elements (because css is scary) but wants to retain maximum customizability
without modifying the upstream package, plus we don't want shadow contained
css to be duplicated. Not sure if there's a good solution for that.

------
tadzik_
Any info on what this is?

~~~
captain_crabs
See shadow dom section in here:
[https://github.com/w3c/webcomponents/](https://github.com/w3c/webcomponents/)
which specified most of docs are maintained in here:
[https://dom.spec.whatwg.org/](https://dom.spec.whatwg.org/)

And as for what it is, you know how a given web page has global css/query
selector scope? Shadow dom is like a membrane in there, where styles and other
things don't go in (unless you explicitly poke a hole). It's like a whole new
document that you can nest inside an existing document. It's encapsulation
inside browsers

~~~
blackbear_
to an outsider, web development looks like hacks upon hacks upon hacks upon
hacks upon ......

~~~
jhanschoo
Unfortunately, this is what happens when you need to ensure backward
compatibility with the lowest denominator...

------
Izkata
Um, what? I have a shadow DOM experiment from 2016 that's worked on Firefox
since then... (an over-engineered webcomic tracker, I use it almost every day)

Is this about a better API or something?

Edit: Ohh, I must have enabled it in about:config manually back then. It's
existed since at least Jan 2015 [0], but was disabled by default until this
just now in Nightly.

[0] [https://www.designedbyaturtle.co.uk/2015/how-to-enable-
web-c...](https://www.designedbyaturtle.co.uk/2015/how-to-enable-web-
components-in-firefox-shadow-dom/)

------
praetorian84
Have the polyfills got any better recently? Last I looked, they had a list of
performance issues or only partially supported the spec. Made it really hard
to consider them for a serious production app.

~~~
spankalee
The polyfills have been used in many large production sites for a while now.
The Web Components v1 specs instigated a rewrite of some of them that may have
improved perf, and definitely reduced size.

~~~
praetorian84
Which would you recommend? ShadyDOM?

------
Flenser
Is there a way to modify web component in browser dev tools?

I tried it on the new chrome manage bookmarks page to reduce the whitespace
but I could only edit a single instance; I couldn't adjust the whole page the
way you can with normal CSS.

~~~
schroffl
At least in chrome you can enable "Show user agent shadow DOM" in the
Settings. I don't know about other browsers, sorry.

~~~
Flenser
Yes, that's what I'm talking about. I enabled that setting, edited the css in
the shadow dom, and it only changed the appearance of the component I was in,
not all the other components of the same type.

As far as I can tell, shadow-dom and web components are _anti-tinker_ in that
they don't allow users to play with the underlying definitions in order to
learn how to use those technologies themselves. I think that will be a big
barrier to adoption.

------
zouhair
What does this mean for a normal user?

~~~
jbob2000
Absolutely nothing. Some websites might be faster. Some might be slower. Users
will attribute any difference to their internet connection, not the
technology. A handful of developers will do something somewhat interesting
with it, the rest of us will continue building shopping carts and blogs like
we always have.

------
TylerH
About time, dang

