Polymer 3 应用程序中的 Shadow dom 使用（youtube.com 示例）

Question

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

Youtube 团队最近将他们的代码更新为 Polymer 3.x

如果你去 youtube 并打开开发工具，你根本看不到任何 shadow dom：

但是，当您启动一个新的 Polymer 3 应用程序时，shadow dom 就在这里，就像在以前的版本中一样。

有很多关于能够在没有 shadow dom 的情况下渲染某些组件的讨论。似乎 youtube 团队在这方面取得了成功。

Shadow dom 非常适合组件开发，但是页面，对于 例如，不应将其视为组件，恕我直言。治疗 一切作为一个组件（使用 ShadowDom）都变得很痛苦—— 样式、第三方库等问题。

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

Answer 1

可能他们正在使用这个：

polymer reference

强调我的：

自定义 DOM 初始化

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

Light DOM 中的图章模板

您可以通过覆盖 _attachDom 来自定义 DOM 的标记方式 方法。该方法接受一个参数，一个 DocumentFragment 包含要标记的 DOM。如果你想在模板上盖章 进入 light DOM，只需像这样添加一个覆盖：

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

标记到 light DOM 中的模板不应包含任何标签。 样式可以由封闭的宿主元素应用，也可以在文档中应用 如果该元素未在另一个元素的 shadow DOM 中使用，则为 level。

关于 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”的函数组合