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

我正在使用Polymer框架来构建Web应用程序。我有一个使用其他基本Polymer元素作为构建块的自定义表格元素。表格元素有一列和几行信息。我正在研究突出表中信息的行为。突出显示行为将突出显示表中的整个行，或者只突出显示行中相关信息的特定位。为什么getElementsByClassName（）访问影子DOM中的元素？

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

<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中的一些高亮元素。现在这非常方便，但对于我对聚合物的理解，这对我没有意义。我想我必须直接查询阴影根目录才能获取其中包含的元素。我想知道为什么城堡围墙似乎在这种情况下被违反？

来源

2016-11-04 Matthew Hardin

您使用的是什么浏览器？聚合物不能使影子DOM在本身不支持它的浏览器中工作。（或者也许它可以和我不知情。） – Pointy

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

可以启用阴影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');

来源

2016-11-04 13:58:00

谢谢！对于这种行为，我可以方便地访问这些元素。虽然这样做是不好的做法吗？ –

我认为这是不好的做法。如果始终使用'Polymer.dom（）'，那么当所有目标浏览器都支持它时，您可以启用shadow DOM，并且您可以从本机性能中受益。如果你不使用它，启用阴影DOM会破坏你的代码。如果这不影响你，你可以忽略'Polymer.dom（）'。 –

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

回答

相关问题