javascript - 为什么 getElementsByClassName() 访问影子 DOM 中的元素？

Question

我正在使用 Polymer 框架构建 Web 应用程序。我有一个自定义表格元素，它使用其他基本的 Polymer 元素作为构建 block 。表格元素有一列和几行信息。我正在研究一种行为以突出显示表格中的信息。突出显示行为将突出显示表格中的整行，或仅突出显示行中相关信息的特定位。

我创建了一个新的自定义元素，表格和突出显示行为将在其中发挥作用。具有突出显示行的表格会获得一类突出显示。

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../highlight-behavior/highlight-behavior.html">
<link rel="import" href="../custom-table/custom-table.html">

<dom-module id="test-sync">
<template>
  <style>
    :host {
      display: block;
      box-sizing: border-box;
    }
  </style>

  <custom-table class="highlight"></custom-table>
  <custom-table class="highlight"></custom-table>
  <custom-table class="highlight"></custom-table>
  <custom-table class="highlight"></custom-table>

</template>

为了尝试使用统一的方法来处理突出显示功能，我还为在表格中排列行的自定义元素分配了相同的类。我完全希望将它们的属性冒泡到父级(表格)，以便突出显示行为可以与它们交互。

在我写的高亮行为中:

<script>
/** @polymerBehavior HighlightBehavior*/
HighlightBehavior = { 

  attached: function() {
    console.log(this.getElementsByClassName('highlight'));
  }
}
</script>

在我的日志中，我希望只返回四个自定义表元素。结果不是这样，我也得到了自定义表格影子DOM中的元素，并带有一类高亮。现在这非常方便，但是根据我对 Polymer 的了解，这对我来说没有意义。我以为我必须直接查询影子根才能获取其中包含的元素。我想知道为什么在这种情况下城墙似乎被攻破了？

Answer 1

默认为 shady DOM，shady DOM 不会阻止您访问元素的内容。

要么启用 shadow DOM https://www.polymer-project.org/1.0/docs/devguide/settings

或使用 Polymer DOM API https://www.polymer-project.org/1.0/docs/devguide/local-dom

Polymer.dom(this.root).getElementsByClassName('highlight');