javascript - 如何在不使用 Shadow DOM 的情况下创建组件？

Question

我正在尝试创建一个没有 Shadow DOM 的组件。是的，我知道，Shadow DOM 非常棒，而且是 Web Components 的主要焦点之一。但是，假设我想要一个组件的样式从父级继承。

使用 Shadow DOM

<dom-module id="my-view1">
  <template>
    <div class="card">
      <div class="circle">1</div>
      <h1>View One</h1>
      <p>Ut labores minimum atomorum pro. Laudem tibique ut has.</p>
      <p>Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea.Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea.Cu mei vide viris gloriatur, at populo eripuit sit.</p>
    </div>
  </template>
  <script>
    class MyView1 extends Polymer.Element {
      static get is() { return 'my-view1'; }
    }
    window.customElements.define(MyView1.is, MyView1);
  </script>
</dom-module>

我已经应用了 Polymer 组提供的说明，不使用 Shadow DOM，地址:https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom

但是，如果我不指定 template 或指定 static get template() { return false; ，DOM 甚至不加载自定义组件中的元素。

Answer 1

Shadow dom 是一个伟大的概念，我们应该尝试采用它，但仍然需要使用旧库，我们可以放弃它。这些库主要使用 light dom。使用 polymer 2 元素，您可以通过覆盖 Polymer.ElementMixin 的 _attachDom 方法附加到 light dom，这里是一个示例。

class MyElement extends Polymer.Element {

    static get is() { return 'my-element'; }

    static get template() { return `<h1>My element</hi><div><slot><slot></div>`; }

    _attachDom(dom) {
        Polymer.dom(this).appendChild(dom);
    }
}

window.customElements.define(MyElement.is, MyElement);

这会将元素附加到元素的 light dom 上。您可以根据需要将元素附加到文档中的任何位置。