選擇的嵌套聚合物元素innerHTML缺少樣式

Question

目前，我正在嘗試訪問嵌套元素。 據我了解，chrome支持shadow dom，因此我可以像這樣訪問嵌套元素的內部html

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

在使用陰暗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>

在Firefox中

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>

Answer 1

由於存在分布式節點的問題，您需要非常小心（當<content>元素出現在自定義元素的<template>內時，該內容將以填充形式填充（從dom角度來看）在dom樹的其他節點上，您應該使用Polymer.dom()函數來一致地操作事物。有關更完整的解釋和所提供的函數，請參閱開發者指南。