Web Component中ShadowRoot内ellipse元素获取及样式设置报错问题

你的问题出在元素获取的语法完全错误，导致拿到的不是DOM元素而是字符串，自然无法设置style属性。具体问题和修复方案如下：

错误原因 #

你写的代码：

const ellipse = this.shadowRoot.getElementById="ellipse#"+id;

这是把字符串（比如ellipse#50）直接赋值给了getElementById方法本身，而非调用方法去获取元素。最终ellipse变量存储的是字符串，不是DOM节点，所以执行ellipse.style.strokeDasharray时会触发Cannot set properties of undefined错误。

另外，目标<ellipse>的ID是纯数字（比如示例里的57），不需要在ID前加ellipse#，getElementById只需要传入元素的ID字符串即可。

修复方案 #

1. 正确获取元素

调用getElementById方法传入目标ID：

// 若id是数字类型，转成字符串再传入
const ellipse = this.shadowRoot.getElementById(id.toString());

如果id本身已经是字符串类型，直接传id即可。

2. 安全设置样式

为避免元素不存在时报错，建议先判断元素是否存在：

if (ellipse) {
  ellipse.style.strokeDasharray = '0, 1000';
}

备选方案：使用querySelector

如果习惯用选择器语法，也可以用querySelector（注意选择器里的#）：

const ellipse = this.shadowRoot.querySelector(`ellipse#${id}`);
if (ellipse) {
  ellipse.style.strokeDasharray = '0, 1000';
}

批量处理所有ellipse元素 #

如果要给Web Component内所有ellipse元素添加样式，可用querySelectorAll：

const ellipses = this.shadowRoot.querySelectorAll('ellipse');
ellipses.forEach(el => {
  el.style.strokeDasharray = '0, 1000';
});

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