如何使用d3 v4对Google Polymer 2.0 Shadow Dom对象执行d3.select操作？

嘿，完全懂你不想放弃D3的心情——Shadow DOM的隔离性确实会给常规选择带来麻烦，但咱们完全可以用D3搞定这个，不用妥协！

核心思路 #

Shadow DOM里的元素是隔离在主DOM之外的，常规的d3.select()只会在主DOM树里查找，所以咱们得先拿到自定义元素的shadowRoot，再让D3在这个根节点内部进行选择。

具体步骤 #

1. 确保自定义元素的Shadow DOM是开放的

首先检查你的action-label元素定义，必须使用mode: 'open'来创建Shadow DOM，否则外部无法访问shadowRoot：

class ActionLabel extends Polymer.Element {
  static get is() { return 'action-label'; }
  constructor() {
    super();
    // 关键：mode必须为open，才能外部访问Shadow Root
    this.attachShadow({ mode: 'open' });
    // 后续的模板渲染等代码
  }
}
customElements.define(ActionLabel.is, ActionLabel);

如果之前用的是mode: 'closed'，改成open就好——这是外部访问Shadow DOM的前提。

2. 用D3先选中自定义元素，再穿透到Shadow DOM

先获取你的ActionEnabledLabel元素，再拿到它的shadowRoot，最后让D3在这个根节点里选择目标元素：

// 1. 选中自定义元素本身
const customElement = d3.select('#ActionEnabledLabel').node();
// 2. 获取它的Shadow Root
const shadowRoot = customElement.shadowRoot;

// 3. 用D3在Shadow DOM里选择iron-label
// 比如直接选择shadowRoot里的iron-label
const targetLabel = d3.select(shadowRoot).select('iron-label');
// 如果你的iron-label有特定ID/类，也可以精准选择：
// const targetLabel = d3.select(shadowRoot).select('#your-iron-label-id');

3. 批量处理多个自定义元素的情况

如果你有多个action-label元素，也可以用D3的循环来批量操作：

d3.selectAll('action-label').each(function() {
  const shadowRoot = this.shadowRoot;
  if (shadowRoot) {
    // 这里可以对每个Shadow DOM里的元素做操作，比如修改样式
    d3.select(shadowRoot).select('iron-label')
      .style('color', '#2196F3')
      .attr('title', '用D3修改的Shadow DOM元素');
  }
});

为什么之前失败？ #

因为默认情况下，D3的选择器和原生querySelector一样，不会穿透Shadow DOM的边界——主DOM和Shadow DOM是两个独立的树。所以必须先明确进入Shadow DOM的根节点，再进行内部选择。

这样操作下来，你就能继续用熟悉的D3语法来操作Shadow DOM里的元素啦！

内容的提问来源于stack exchange，提问作者McManaman