Polymer-Element im Schatten funktioniert, aber ist nicht gestylt

Question

Ich arbeite an einer App, die die benutzerdefinierte Element-API verwendet (mit webcomponents.js als Polyfill). Innerhalb meines Elements möchte ich alles in eine Schattenwurzel einkapseln. Die HTML-Vorlage des Polymerelements scheint korrekt importiert zu werden, jedoch Styling fehlt - anders als wenn ich das Element nach draußen, wo Styling scheint zu funktionieren:

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

Frage: Warum funktioniert das ursprüngliche Styling von Polymer-Web-Komponenten nicht innerhalb der Schattenwurzel?

Edit: hier ist ein Plunker; funktioniert in Chrom nur FTM. http://plnkr.co/edit/rEibVckeUAqqrZljuVEy?p=preview

Answer 1

Nicht genau sicher, ob dies das ist, was Sie erreichen wollen, aber das ist, was ich getan habe.

In x-foo.html habe ich im Abschnitt Vorlage hinzugefügt. (Papier-Eingang)

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

In Ihrem Haupt index.html habe ich folgendes:

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

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

Ich glaube nicht, das Hinzufügen einfach nur innerHTML- wird Polymer auslösen seine Magie zu injizieren .