阴影dom中的聚合物元素可以工作，但没有样式

Question

我正在开发一个应用程序，它使用自定义元素API（使用webcomponents.js作为polyfill）。在我的元素内部，我想将所有内容封装在阴影根中。聚合物元素的HTML模板似乎是正确导入的，但是缺少样式 - 不像我将元素放在外面时，样式似乎有效：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

问题：为什么聚合物网状组件的原始样式在阴影根部内不起作用？

编辑：这是一个Plunker;仅适用于镀铬FTM。 http://plnkr.co/edit/rEibVckeUAqqrZljuVEy?p=preview

Answer 1

不确定这是否是您想要实现的目标，但这就是我所做的。

在x-foo.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>

在您的主index.html中，我执行了以下操作：

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

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

我不认为只添加普通的innerHTML会触发聚合物注入其魔力。