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

Question

我正在尝试创建一个没有Shadow DOM的组件.是的,我知道,Shadow DOM非常棒,而且是Web组件的主要关注点之一.但是,让我们说我希望组件的样式从父级继承.

使用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是一个伟大的概念,我们应该尝试采用它,如何使用旧库仍然是必要的,我们可以放弃它.这些图书馆大多使用轻型dom.使用聚合物2种元素,可以通过重写附加到光DOM _attachDom的方法Polymer.ElementMixin这里是一个例子.

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);

这将元素附加到元素的光dom.您可以根据要求将元素附加到文档中的任何位置.

Answer 2

正如你所说，也如你所知：

“是的，我知道，Shadow DOM 非常棒，而且是 Web 组件的主要关注点之一。”

你使用了这个词inherit，shadow-dom 的一大优点是继承的文本样式会泄漏到阴影内部。

例如 ：

<style>
  p { font-size: 1.3em }
</style>
<p><your-element></your-element></p>

如果您没有覆盖其中的文本样式，your-element它们将继承外部样式的 font-size 属性。

如果您确实想在元素之间共享样式，我们可以在 dom 模块模板中使用标签include的属性。style例如，

<dom-module id="french-fries-styles">
  <template>
    <style>
      .french-fries {
        display: block;
        width: 100px;
        height: 30px;
        background-color: yellow; /* french fries are yellow */
      }
    </style>
  </template>
</dom-module>

<dom-module id="french-fries-are-tasty">
  <style include="french-fries-styles"></style>
  <div class="french-fries"></div>
</dom-module>

<dom-module id="burger-king">
  <style include="french-fries-styles"></style>
  <div id="burger-king-fries" class="french-fries"></div>
</dom-module>