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

我想创建一个没有Shadow DOM的组件。是的，我知道，Shadow DOM非常棒，并且是Web组件的主要焦点之一。但是，让我们说我想要一个组件的样式从父项继承。如何在不使用Shadow DOM的情况下创建组件？

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

我已经申请由高分子组提供的说明，不使用影子DOM，网址为：https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom

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

来源

2017-08-08 Aaron Brewer

你应该尝试不使用聚合物。我想如果对一个'自定义元素'你不附加shadowDom你可能会做到这一点。 – a1626

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

“是的，我知道，Shadow DOM非常棒，并且是Web组件主要的主要部分之一。“

你用这个词inherit，以及有关影子DOM的一个好处是，继承文本样式将在阴影里面泄漏..

例如：

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

如果你没”不会覆盖your-element中的文本样式，它们将继承font-size属性的外部样式。

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

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

来源

2017-08-10 15:52:37 user544262772

你想达到什么目的？例如，你扩展了一个Polymer元素，甚至是HTMLElement。

如果超元，有一个模板，子元素将继承模板，直到除非你指定它不，或者从template getter的子元素返回false。
如果父元素不是指定一个模板，您不会继承一个。

这就是说，

如果你想创建一个自定义元素SANS模板/ 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 
}

为您创建元素的shadowDOM由于浏览器不会在最不知道怎么画/布局定制元素，你需要通过JS

阴影DOM /自定义模板装备它
你不能明显地迫使它呈现光DOM，而无需阴影树范围之/其分发给，你自然不能指望它呈现什么没有模板。

所以，当你说，

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

应该与templating和shadowDOM上下文很明显，如果你正在创建一个元素，没有shadow DOM或template，你根本不能指望它来呈现任何内容，自行式/分布式

此外，

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

，并做到这一点，而无需渲染来自父母的模板的东西，和/或使用在Polymer只从父母的模板

位，可以从父模板跳过的东西与memoizing 读here

来源

2017-08-09 12:31:34

感谢您的详细解释！我继续了解聚合物，所以这有助于很多！谢谢@薛定谔的猫。 –

影子DOM是一个伟大的概念，向前迈进，我们应该尽量采用它，怎么过使用旧库仍然是必要的，我们可以放过它。这些库大多使用轻量级的dom。使用聚合物2元素，您可以通过重写_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);

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

来源

2017-12-03 23:23:15

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

回答

相关问题