自定義元素2.0

我想，而不使用與來自https://www.polymer-project.org/2.0/start/first-element/step-2 自定義元素2.0

<link rel="import" href="../polymer/polymer-element.html"> 
<link rel="import" href="../iron-icon/iron-icon.html"> 
<dom-module id="icon-toggle"> 
    <template> 
    <style> 
     /* shadow DOM styles go here */ 
     :host { 
     display: inline-block; 
     } 
     iron-icon { 
     fill: rgba(0,0,0,0); 
     stroke: currentcolor; 
     } 
     :host([pressed]) iron-icon { 
     fill: currentcolor; 
     } 
    </style> 
    <!-- shadow DOM goes here --> 
    <iron-icon icon="polymer"></iron-icon> 
    </template> 
    <script> 
    class IconToggle extends Polymer.Element { 
     static get is() { 
     return "icon-toggle"; 
     } 
     constructor() { 
     super(); 
     } 
    } 
    customElements.define(IconToggle.is, IconToggle); 
    </script> 
</dom-module>

下面的示例代碼聚合物2.0可否請你讓我知道是否有可能與聚合物影子DOM來創建自定義元素2.0？

來源

2017-07-17 divya reddy

你在想什麼？

「我想沒有聚合物2.0創建自定義元素」

https://developer.mozilla.org/en-US/docs/Web/Web_Components/Custom_Elements

可否請你讓我知道是否有可能與聚合物2.0嗎？

now im confused？所以你想使用聚合物或你不會使用它？

來源

2017-07-18 12:52:00

對不起，錯字錯誤..我的意思是根據標題..沒有影子DOM使用聚合物2.0 –

然後只是刪除模板部分 –

我期待使用polymer2.0，如果我刪除模板，它將是純ES6 webcomponents –

在Polymer2中，默認情況下使用'Shadow-dom'創建自定義元素。如果你想創建一個沒有Shadow-dom的，你可以改用shadyDom。只需將'shadydom'作爲屬性添加到Web組件腳本調用中即可。

<script src="webcomponentsjs/webcomponents-lite.js" shadydom></script>

請注意，您將失去與Shady Dom的封裝。

來源

2017-09-18 05:12:08

我想知道如何適用於不依賴於任何polyfill的Chrome等瀏覽器。這是否會強制Chrome使用Polyfill而不是其原生的Shadow DOM？如果是這樣，這會對性能產生負面影響嗎？（我猜你會在其他瀏覽器中獲得） – Hendrik

@ Hendrik你是對的。將shadydom作爲屬性添加到腳本會在所有瀏覽器中強制實施polyfills。是的，我相信它會失去影子DOM的好處，並會嚴重影響性能。我沒有看到任何強迫shadydom的用例（除了測試目的） –

謝謝@Srikanth！我同意這不是大多數情況下可行的選擇。它可能會爲我正在處理的特定用例開闢一些機會...... – Hendrik

自定義元素2.0

回答

相關問題