Question

目前我正在尝试访问嵌套元素。据我所知，chrome支持shadow dom所以我可以访问嵌套元素的内部html，如此

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

在使用阴暗dom的firefox中

this.$.grade.$printable.innerHTML

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

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

示例

in chrome

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

由于分布式节点的问题（当this.count元素出现在自定义元素的<content>内时，您需要非常小心您正在做的事情，该内容填充了内容形式（从dom角度来看）dom树中其他位置的节点。你应该使用<template>函数来一致地操作事物。请参阅开发人员指南以获得更全面的解释和所提供的功能。

选择嵌套聚合物元素innerHTML缺少风格

1 个答案: