QUESTION: Shadow dom usage in polymer 3 app (youtube.com example)

[iSuslov]

I will duplicate my question from stackoverflow here.

Youtube team recently updated their code to Polymer 3.x

If you go to youtube and open dev tools, you don't see any shadow dom at all.

However, when you start a new Polymer 3 app, shadow dom is here, as it was in previous versions.

There are a lot of discussions about how great it will be to be able to render certain components without shadow dom. Seems like youtube team has succeeded in this.

Shadow dom is great for component development, but pages, for instance, should not be treated as components, IMHO. Treating everything as a component (with ShadowDom) turns out to a be pain - issues with styling, third party libs and more.

My question is: How youtube team achieved this?

[TimvdLippe]

Youtube uses Shadydom, even for browsers that support shadow dom natively. For more information see https://github.com/webcomponents/shadydom#usage Please note that this is a global setting and it will not work on a per-component basis. We still recommend everyone to use native shadow dom if the browser supports.

[iSuslov]

@TimvdLippe thank you! One more question if you will, please. Why do you think they avoid your recommendations and force Shadydom?

[TimvdLippe]

Youtube is an atypical web application. I do not know their particular reasoning. However, it would surprise me if the reasoning could be applied to any other application on the web. Youtube is unique in that regard. Therefore, we still recommend using native shadow dom. Maybe in the future Youtube reconsiders and does use native shadow dom as well.

[web-padawan]

@iSuslov if you are interested in discussing specific technical challenges which still exist when using Shadow DOM, check my blog posts (first, second) about how web components affect us today.

In short, certain web APIs are still under standardisation:

• sequential focus navigation: attachShadow({ delegatesFocus: true })
• Selection API: document.getSelection().getComposedRange()

And there are few other unsolved issues which I listed in my posts. They are generally small problems but they might strike back in different ways when using Shadow DOM at a big scale.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically closed after being marked stale. If you're still facing this problem with the above solution, please comment and we'll reopen!