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

我试图创建一个没有阴影DOM的组件。是的，我知道，ShadowDOM非常棒，是Web组件的主要焦点之一。但是，假设我希望组件的样式从父级继承

使用阴影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>

1.
视图一
Ut致力于最低限度的atomorum pro。劳登·提比克·尤特

普利普希特山上的龙舌兰，在诺米纳维山上的龙舌兰，在精英奥波尔特山上的龙舌兰，在诺米纳维山上的龙舌兰，在精英奥波尔特山上的龙舌兰，在埃利普希特山上的龙舌兰，在埃利普希特山上的龙舌兰，在埃利普希特山上的龙舌兰

类MyView1扩展了Polymer.Element{
静态get是（）{return'my-view1'；}
}
window.customElements.define（MyView1.is，MyView1）；

我已应用Polymer group提供的说明，在以下位置不使用阴影DOM：

---

但是，如果我没有指定

模板

或指定

静态get template（）{return false；}

，DOM甚至不会加载自定义组件中的元素。

您想实现什么

比如说，你扩展了一个聚合物元素，甚至是一个HTMLElement

• 如果超级元素有一个模板，则子元素将继承该模板，直到并且除非您将其指定为而不是，或者从子元素中的

  模板getter

  返回false

• 如果父元素未指定模板，则不会继承模板

也就是说

如果要创建自定义元素sans template/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/自定义模板

显然，如果没有阴影树对其进行范围/分布，则无法强制它渲染light DOM 当然，如果没有模板，您不能期望它呈现任何内容

所以，当你说

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

在

模板化

和

阴影DOM

的上下文中，很明显，如果您创建的元素没有

阴影DOM

或

模板

，您就不能期望它呈现任何自/分布式内容

此外

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

并且在不渲染父模板中的内容和/或仅使用父模板中的位的情况下执行此操作

在

Polymer

中，您可以使用

memonizing

---

正如你所说的那样阅读，正如你所知道的：

“是的，我知道，影子多姆是伟大的，而且是最主要的人物之一 Web组件的重点。”

您使用了单词

inherit

，ShadowDOM的一个优点是继承的文本样式将泄漏到阴影中

例如：

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

---

shadowdom是一个伟大的概念，在前进的过程中，我们应该尝试采用它，不管怎样使用旧库仍然是必要的，我们仍然可以放弃它。这些库主要使用轻型dom。使用polymer 2元素，您可以通过覆盖polymer的\u attachDom方法来附加到light dom。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);

MyElement类扩展了Polymer.Element{ 静态get是（）{return'my element'；} 静态获取模板（）{return`My element`；} _附件（dom）{ Polymer.dom（this.appendChild（dom）； } } window.customElements.define（MyElement.is，MyElement）；

---

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

你应该试着不用聚合物。我想如果你没有在

自定义元素上附加shadowDom，你也许可以这样做。关于它的官方文档：谢谢你的详细解释！我继续了解聚合物，所以这对我很有帮助！谢谢@Schrodinger's cat.“很棒的概念”-嗯。。？我就是不明白？如果IE不通过拒绝为应用程序/XML请求提供服务而一手扼杀整个XHTML工作，那么用于CSS范围界定的XML名称空间不是会更好吗。。。Shadow DOM的感觉是很长一段时间以来最迟钝、最仓促、最笨拙的解决方案——可能比该死的BEM级歇斯底里还要丑陋。让语义标记见鬼去吧，90%的类还是回家吧。为什么我们需要它，伊夫拉姆从永远以来都在做同样的事情。现在我觉得自己被迫使用这些废话，或者被抛在尘土中/<代码>是否在
标记上包含
属性？从没听说过。请提供文件link@vsync看问题标签。
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);