选定的嵌套聚合物元素 innerHTML 缺少样式答案

【问题标题】：selected nested polymer element innerHTML missing style选定的嵌套聚合物元素 innerHTML 缺少样式
【发布时间】：2016-08-12 00:10:46
【问题描述】：

目前我正在尝试访问嵌套元素。据我了解，chrome 支持 shadow dom，所以我可以像这样访问嵌套元素的内部 html

this.$.grade.$printable.root.innerHTML

在使用 shady dom 的 Firefox 中

this.$.grade.$printable.innerHTML

问题是在 firefox 的情况下，innerHTML 缺少本地 dom css，而在 chrome 中它可以正确呈现

在查询元素时无论如何要保留本地 dom css

示例

在铬中

console.log(this.$.grade.root.innerHTML)

<style scope="grades-view">grades-printable {
  display: none;
}

@media only print {
grades-card, grades-table {
  display: none;
}

grades-printable {
  display: block;
}

}</style>


  <iron-ajax auto="" handle-as="json" hidden=""></iron-ajax>

  <grades-card></grades-card>

在火狐中

console.log(this.$.grade.innerHTML)

<iron-ajax class="style-scope grades-view" auto="" handle-as="json" hidden=""></iron-ajax>

<grades-card class="style-scope grades-view"></grades-card>

【问题讨论】：

你能否展示一些你得到的例子，以及这种“本地 dom 风格”的样子？

标签： javascript polymer

【解决方案1】：

由于分布式节点的问题，您需要非常小心您正在做的事情（当 <content> 元素出现在自定义元素的 <template> 内时，该内容会以填充形式填充（来自dom 透视图) dom 树中其他位置的节点。您应该使用Polymer.dom() 函数来一致地操作事物。有关更完整的解释和提供的函数，请参阅开发人员指南。

【讨论】：