Element.createShadowRoot（）の代替手段は何ですか？

Question

私は、コードのこの部分を使用しています：

function setShadowDOM(i, css){ 
    [].forEach.call(document.getElementsByTagName(i), function(hostVal) { 
     var _root = hostVal.createShadowRoot(); 
      _root.innerHTML = '<style>:host ' + css + '</style><content></content>'; 
    }) 
} 

私もreading thisです。

これを解決するにはどうすればよいですか？代わりになるのは何ですか？

Answer 1

今、あなたはcreateShadowRoot()の代わりにattachShadow()を使用することができます。

• これは、Chromeのimplemented nativelyです（53+）、オペラ（40 +）、およびSafari（10）。

• webcomponents.jsチームでもpolyfillあります：ShadyDOM。

シャドウDOM v1はDOM Living Standardです。

EdgeとFirefoxの実装をサポートできます。

Answer 2

MDN docsではなくattachShadowを使用するためにあなたに教えて...しかし、その機能自体は現時点ではどのブラウザで非標準と完全にサポートされていないとしてフラグ付けされています

まともなブラウザがサポートされている標準が提供されるまでは、Webコンポーネントを使用する場合は、として動作するwebcomponents.jsまたはPolymer（独自のAPIを使用）を使用することをお勧めします。

は、ASでもwebcomponents.jsがattachShadowをサポートしていない、現時点では、あなたのオプションは、のいずれかです：

• Element.createShadowRoot()を使い続けると、サポートされていないブラウザ

でこの機能をpolyfillingためwebcomponents.jsを使用して...または：

• ウェブコンポーネントをPolymerに移植する（あなたの代わりに、ポリマーのAPIを使用する必要があります意味）

多くの人々は、それは、独自のAPIを持っているからこそ、webcomponents.jsにPolymerを好みます。 Polymerを使用すると、正確なWebコンポーネントの実装がボンネットの下で行われ、その実装に対する変更がPolymer自身のAPIに影響を与える可能性が低いため、コードは将来性がある可能性が高くなります。