聚合物3应用中的影子dom使用情况（youtube.com示例）

Question

更新：https://github.com/Polymer/polymer/issues/5551-他们使用shadyDom

Youtube团队最近将其代码更新为Polymer 3.x

如果您转到youtube并打开开发工具，则根本看不到任何影子dom：

但是，当您启动新的Polymer 3应用程序时，就像以前的版本一样，shadow dom也位于此处。

关于无阴影dom的某些组件的渲染将有多大的讨论。好像youtube团队已经成功做到了这一点。

  

Shadow dom对于组件开发非常有用，但是页面对于   实例，恕不视为组件，恕我直言。治疗   一切（作为ShadowDom）的组成部分都让人感到痛苦-   样式问题，第三方库等等。

我的问题是：YouTube团队是如何做到这一点的？

Answer 1

可能他们正在使用它：

polymer reference

强调我：

  

自定义DOM初始化

     

有几点可以   自定义Polymer如何初始化元素的DOM。您可以   通过自己创建影子根来定制它的创建方式。和   您可以覆盖_attachDom方法来更改DOM树的方式   被添加到您的元素中：例如，标记为轻型DOM   影子DOM。

     

轻型DOM中的印章模板

     

您可以通过覆盖_attachDom自定义DOM的标记方式   方法。该方法有一个参数，一个DocumentFragment   包含要标记的DOM。如果要标记模板   进入轻型DOM，只需添加一个这样的替代：      

_attachDom（dom）{this.appendChild（dom）; }当像这样标记DOM模板以点亮DOM时，数据绑定和声明性事件   侦听器照常工作，但是您不能使用影子DOM功能，例如    和样式封装。

     

标记为轻型DOM的模板不应包含任何标签。   样式可以通过封闭的宿主元素或在文档中应用   如果该元素未在另一个元素的影子DOM内使用，则为水平。

关于litelement中的样式，现在您可以这样做：

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()}
    `
}

请注意，此功能可以在模块之间共享，并且可以与其他返回“ CSS”的功能组成