Css 阴影dom样式未显示

通过此实例实例化的web组件样式不正确：

connectedCallback() {
  const shadowRoot = this.attachShadow({ mode: 'open' });
  this.svg = document.createElement('svg');
  this.svg.style = `
    height: 80px;
    width: 80px;
    background-color: beige;
  `;
  shadowRoot.appendChild(this.svg);
}

但是，“样式”属性在Chrome DevTools中显示正确的数据。如果我这样重写逻辑，样式就会显示出来

connectedCallback() {
  const shadowRoot = this.attachShadow({ mode: 'open' });
  let htmlHolder = document.createElement('template');
  htmlHolder.innerHTML = `<svg></svg>`;
  shadowRoot.appendChild(htmlHolder.content.cloneNode(true));
  this.svg = shadowRoot.querySelector('svg');
  this.svg.style = `
      height: 80px;
      width: 80px;
      background-color: beige;
  `;
}

connectedCallback（）{
const shadowRoot=this.attachShadow（{mode:'open'}）；
让htmlHolder=document.createElement（'template'）；
htmlHolder.innerHTML=`；
appendChild（htmlHolder.content.cloneNode（true））；
this.svg=shadowRoot.querySelector（'svg'）；
this.svg.style=`
高度：80px；
宽度：80px；
背景颜色：米色；
`;
}

---

我不确定这两个元素的行为为何不同。

如果使用

createElement

定义SVG元素，则应设置特定的SVG命名空间，即

http://www.w3.org/2000/svg

然后必须使用以下方法：

this.svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');