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

Question

UPDATE: https://github.com/Polymer/polymer/issues/5551 - they use shadyDom
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?

Answer 1

Posibly they are using this:
polymer reference
emphasis mine :
Customize DOM initialization
There are several points where you can
customize how Polymer initializes your element's DOM. You can
customize how the shadow root is created by creating it yourself. And
you can override the _attachDom method to change how the the DOM tree
is added to your element: for example, to stamp into light DOM instead
of shadow DOM.
Stamp templates in light DOM
You can customize how the DOM is stamped by overriding the _attachDom
method. The method takes a single argument, a DocumentFragment
containing the DOM to be stamped. If you want to stamp the template
into light DOM, simply add an override like this:
_attachDom(dom) { this.appendChild(dom); } When you stamp the DOM template to light DOM like this, data bindings and declarative event
listeners work as usual, but you cannot use shadow DOM features, like
and style encapsulation.
A template stamped into light DOM shouldn't contain any tags.
Styles can be applied by an enclosing host element, or at the document
level if the element isn't used inside another element's shadow DOM.
About the styling in litelement, now you can do:
static get styles() {
return css`
:host {
display: block;
height: 100%;
}
.boxing rect {
x: -24;
y: -14;
width: 48px;
height: 28px;
rx: 8;
ry: 8;
}
.copia rect.text {
width: 135px;
height: 30px;
stroke:blue;
stroke-width: 1px;
}
text {
font-size: 20px;
font-family: Arial;
}
${miGestorEstilos.getDibujaGafa()}
${miGestorEstilos.getDibujaForma()}
`
}
Notice that this function can be shared across modules, and is composable with other functions returning also "CSS"