使用 webcomponents.js 时访问 light DOM (Shadow DOM polyfill)答案

【问题标题】：Access to light DOM when using webcomponents.js (Shadow DOM polyfill)使用 webcomponents.js 时访问 light DOM (Shadow DOM polyfill)
【发布时间】：2015-01-08 20:04:19
【问题描述】：

我在使用 webcomponents.js polyfill 时尝试访问 light DOM，但它似乎不起作用。（在原生 Shadow DOM/Chrome 中运行良好）

这是对我正在尝试做的事情的简化测试：

示例：http://jsbin.com/wudakapujo/1/ 代码：http://jsbin.com/wudakapujo/1/edit

任何关于我在使用 Shadow DOM polyfill 时如何访问 Light DOM 数据的提示/指针将不胜感激

谢谢！

【问题讨论】：

事实证明，polyfill 中有一个“错误”/增强功能，轻量级 DOM 元素被移除除非它们通过内容标签使用

标签： polymer web-component shadow-dom polyfills

【解决方案1】：

尝试将<content></content> 添加到您的模板中，或添加<content select="span"></content> 以获取span 标记。

<template>
  <h1>SHADOW DOM CONTENT</h1>
  <content select="span"></content>
</template>

【讨论】：

【解决方案2】：

您是否尝试过查看

this.content.getDistributedNodes()

看 https://www.polymer-project.org/resources/faq.html#accessContentDOM

【讨论】：

注意this.content 默认没有定义。您必须从 shadow dom 中获取 <content> 元素和所有 getDistributedNodes()