为什么getElementsByClassName()访问影子DOM中的元素?

Why is getElementsByClassName() accessing elements in the shadow DOM?

本文关键字：元素 DOM 影子 getElementsByClassName 访问 为什么      更新时间：2023-09-26

我正在使用聚合物框架来构建web应用程序。我有一个自定义表元素，它使用其他基本的聚合物元素作为构建块。table元素有一列和几行信息。我正在研究在表中突出显示信息的行为。突出显示行为要么突出显示表中的整行，要么只突出显示行中相关信息的特定位。

我创建了一个新的自定义元素，表和突出显示行为将在其中起作用。有需要高亮显示的行的表得到一个高亮类。

<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>

在我的日志中，我希望只返回四个自定义表元素。但事实并非如此，我还在带有highlight类的自定义表阴影DOM中获得了元素。现在这是超级方便的，但这对我来说没有意义，因为我了解聚合物。我认为我必须直接查询阴影根以获得包含在其中的元素。我想知道为什么城堡的墙壁在这种情况下似乎被破坏了?

默认是shady DOM，并且阴暗的DOM不会阻止您访问元素的内容。

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

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

Polymer.dom(this.root).getElementsByClassName('highlight');
相关文章：