首页 文章

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

提问于
浏览 次
0

我正在开发一个应用程序，它使用自定义元素API（使用webcomponents.js作为polyfill） . 在我的元素内部，我想将所有内容封装在阴影根中 . 聚合物元素的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" />

Example

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

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

polymer web-component

1 回答

  • 0

    不确定这是否是你想要实现的，但这就是我所做的 .

    在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会触发聚合物注入其魔力 .

    回复于

相关问题