なぜ、createshadowrootが私に別の結果を与えてからattachshadowを与えるのですか？

Question

私はshadow domに問題があります。 I ve found a tutorial that seems a bit old about shadow dom and itは、createshadowrootを使用しています。私はcreatedhadowrootが推奨されておらず、attachshadowに置き換えなければならないという通知を受けました。

問題i m having is that attachshadow does not produce the desired effect while using templates. Itは、自分の要素の内容をhtmlにコピーしません。 attachShadow

とcreateShadowRoot

結果に

var nameTags = document.querySelectorAll('.nameTag'); 

for (i = 0; i < nameTags.length; ++i) 
{ 
    //var shadow = nameTags[i].attachShadow({ mode: 'open' }); 
    var shadow = nameTags[i].createShadowRoot(); 
    var template = document.querySelector('#nameTagTemplate'); 

    var clone = document.importNode(template.content, true); 

    console.log(shadow); 
    console.log(template); 
    console.log(template.content); 
    console.log(clone); 

    shadow.appendChild(clone); 
} 

結果：ここで

は、私が使用しているコードです。

コンテンツはattachShadowで正しくコピーされていませんが、それでもs createShadowRoot that is deprecated. I donは、将来的にサポートが提供されるため、すべてをcreateShadowRootでコーディングしたいと考えています。何が起こっている？シャドウDOM v1のattachShadow()で

Answer 1

、あなたは今、光DOMからいくつかのコンテンツを挿入するために<template>要素内<slot>の代わり<content>を使用する必要があります。

<template> 
    <slot name="first"></slot> 
</template> 
... 
<div id=host> 
    <div slot="first">Name</div> 
</div> 

隼人またはBidelによってdescription of the <slot> tagによってdifference of use between <slot> and <content>を見てください。