Question

我正在使用Polymer框架来构建Web应用程序。我有一个自定义表元素，它使用其他基本的Polymer元素作为构建块。 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>

在我的日志中，我希望只返回四个自定义表元素。最后并非如此，我还在自定义表格阴影DOM中获得了一类高亮显示的元素。现在这非常方便，但对于我对聚合物的理解，这对我来说没有意义。我以为我必须直接查询阴影根以获取其中包含的元素。我想知道为什么在这种情况下城堡墙似乎被破坏了？

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');

为什么getElementsByClassName（）访问shadow DOM中的元素？

1 个答案: