阴影 dom 内的聚合物元素有效，但没有样式

Posted 2023-03-13

【中文标题】阴影 dom 内的聚合物元素有效，但没有样式

【英文标题】：Polymer element inside shadow dom works, but is not styled

【发布时间】：2016-11-13 11:04:00

【问题描述】：

我正在开发一个应用程序，它使用自定义元素 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" />

问题：为什么聚合物 web 组件的原始样式在 shadow root 中不起作用？

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

【问题讨论】：

PS：用于可视化聚合物相关问题的首选“plunkr-like”平台是什么？ plunkr 似乎没有我使用的聚合物组件，或者至少我没有找到？

如果不需要文件资产，我最喜欢的服务是Codepen。否则，Plunker.

好的，找到了用于纸张输入的 CDN。添加了一个 plunker。

不是我的专业领域，但这可能会有所帮助html5rocks.com/en/tutorials/webcomponents/shadowdom-201

你能用iron-image或iron-icon这样的简单元素试试同样的东西吗？

【参考方案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 会触发聚合物注入它的魔力。