シャドウドームの内側にあるポリマー要素は動作しますが、スタイリングされていません

Question

私はカスタム要素API（ポリフィルとしてwebcomponents.jsを使用）を使用するアプリケーションを開発中です。私の要素の中で、シャドールートのすべてをカプセル化したいと思います。ポリマー要素のHTMLテンプレートは、スタイリングが欠落している、しかし、正しくインポートされているようだ - 私はスタイリングが動作しているようです外の要素を配置する場合とは異なり：

class TestWC extends HTMLElement { 
 
    createdCallback() { 
 
    console.log('created'); 
 
    var ShadowRoot = this.createShadowRoot(); 
 
    ShadowRoot.innerHTML = '<paper-input label="Inside shadow root"></paper-input>'; 
 
    } 
 
} 
 

 
var MyTestWC = document.registerElement('test-test', TestWC); 
 
var MyTestWCInst = new MyTestWC(); 
 
document.querySelector('#placeholder').appendChild(MyTestWCInst);

<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.22/webcomponents.js"></script> 
 
<paper-input label="Outside shadow root"></paper-input> 
 
<p id="placeholder"></p> 
 
<link rel="import" href="https://polygit.org/components/paper-input/paper-input.html" />

質問：ポリマーウェブコンポーネントのオリジナルのスタイリングがシャドールートの中で機能しないのはなぜですか？

編集：ここはプランカです。クロムのみFTMで動作します。 http://plnkr.co/edit/rEibVckeUAqqrZljuVEy?p=preview

Answer 1

これが達成したいと思っているのかどうかは確かではありませんが、これは私がしたことです。

x-foo.htmlでは、テンプレートセクションに次を追加しました。 （紙-入力）私は以下のなかった自分のメインのindex.htmlで

<dom-module id="x-foo"> 
<template> 
    <span>{{foo}}</span> 
    <paper-input label="Inside shadow root"></paper-input> 
</template> 
<script> 
    Polymer({ 
    is: 'x-foo', 
    properties: { 
     foo: { 
     type: String, 
     value: 'Hello world' 
     } 
    } 
    }) 
</script> 

：

//document.querySelector('#placeholder').appendChild(MyTestWCInst); 

var elem = document.createElement("x-foo"); 
document.querySelector("#placeholder").appendChild(elem); 

私はただのinnerHTMLのはその魔法を注入するポリマーをトリガーする追加とは思いません。