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元素，您可以通过覆盖 Polymer.ElementMixin 的 _attachDom 方法附加到光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);

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

Answer 2

你想要达到什么目标？

比如说，你为此扩展了一个Polymer元素甚至HTMLElement。

如果超级元素有一个模板，子元素将继承该模板，除非您将其指定为 NOT ，否则从template getter返回false儿童元素。
如果父元素不指定模板，则不要继承。

那就是说，

如果要创建自定义元素sans template / shadowDOM，

你只必须定义它的属性，属性和行为（如果有的话）。

这段代码绝对为你创建了一个元素没有你想要的shadowDOM

class myApp extends Polymer.Element{
   constructor(){
     super();
   }
   connectedCallback(){ 
    super.connectedCallback();
   }
   static get template(){
    return false;
    // Or, Memoized template
    // Read Docs from link below 
   }
   //Also, define properties , observers, behaviors as per your whim
}

由于浏览器至少不知道如何绘制/布局自定义元素，因此需要通过JS为其配备shadow DOM /自定义模板

你不能明显地强制它渲染轻型DOM，而不是它有一个影子树来扩展/分配它如果没有模板，你自然不能指望它呈现任何东西。

所以，当你说，

但是，如果我没有指定模板或指定静态get模板（）{return false; ，DOM甚至不会加载自定义组件中的元素。

对于templating和shadowDOM的上下文应该非常明显，如果您创建的元素没有shadow DOM或template，则根本无法期望它呈现任何内容，自我/分发

此外，

如果从父元素继承行为是您的目标，

并且不使用父模板中的某些内容进行渲染，和/或仅使用父模板中的位

<{1>}中的

，您可以使用Polymer从父模板中跳过内容阅读here

Answer 3

如你所说，如你所知：

＆＃34;是的，我知道，Shadow DOM是伟大的，所有并且是主要的 Web组件的重点。＆＃34;

你使用了inherit这个词，而关于shadow-dom的一个好处是，继承的文本样式会在阴影内泄漏..

例如：

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

如果你没有覆盖your-element中的文字样式，他们将继承font-size属性外部样式。

如果您真的想在元素之间共享样式，我们会在dom-module模板中使用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>

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

3 个答案: