Html 为什么自定义元素会折叠？

我尝试定义一个自定义字段，包含SVG或画布。但我的示例显示了一些奇怪的渲染。我希望有两个400像素宽和300像素高的盒子。但这两个盒子似乎以不同的方式倒塌。我怎样才能解决这个问题

类TestSvg扩展了HtmleElement
{
构造函数（）{
超级（）；
const shadow=this.attachShadow（{mode:'open'}）；
const container=document.createElement（'svg'）；
container.setAttribute（'width'，'400'）；
container.setAttribute（'height'，'300'）；
shadow.appendChild（容器）；
}
}
类TestCanvas扩展了HtmleElement
{
构造函数（）{
超级（）；
const shadow=this.attachShadow（{mode:'open'}）；
const container=document.createElement（'canvas'）；
container.setAttribute（'width'，'400'）；
container.setAttribute（'height'，'300'）；
shadow.appendChild（容器）；
}
}
customElements.define（'test-svg'，TestSvg）；
customElements.define（'test-canvas'，TestCanvas）
testsvg，测试画布{
边框：1px纯黑；
}
svg
帆布
结束
在第一个自定义元素
TestSvg
中，将元素类型从svg更改为canvas

const container = document.createElement('canvas');

HTML元素参考


“canvas”是一个HTML元素。
其中“svg”不是svg’是容器元素、结构元素

未正确创建SVG元素。它需要位于正确的SVG名称空间中。将其更改为：

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


默认情况下，自定义元素将是
display:inline
。根据需要将它们设置为
block
或
inline block

test-svg, test-canvas {
  display: inline-block;
  border: 1px solid black;
}


更新测试：


类TestSvg扩展了HtmleElement
{
构造函数（）{
超级（）；
const shadow=this.attachShadow（{mode:'open'}）；
const container=document.createElements（'http://www.w3.org/2000/svg'、'svg'）；
container.setAttribute（'width'，'400'）；
container.setAttribute（'height'，'300'）；
shadow.appendChild（容器）；
}
}
类TestCanvas扩展了HtmleElement
{
构造函数（）{
超级（）；
const shadow=this.attachShadow（{mode:'open'}）；
const container=document.createElement（'canvas'）；
container.setAttribute（'width'，'400'）；
container.setAttribute（'height'，'300'）；
shadow.appendChild（容器）；
}
}
customElements.define（'test-svg'，TestSvg）；
customElements.define（'test-canvas'，TestCanvas）
testsvg，测试画布{
显示：内联块；
边框：1px纯黑；
}
svg
帆布
结束
很高兴看到更多的人将自定义元素和SVG结合起来，它们是

您的核心问题是SVG名称空间，因此Paul的答案是正确的

一些补充意见：

可以优化您的构造函数：

constructor（）{
超级（）；
const shadow=this.attachShadow（{mode:'open'}）；
const container=document.createElements（'http://www.w3.org/2000/svg'、'svg'）；
container.setAttribute（'width'，'400'）；
container.setAttribute（'height'，'300'）；
shadow.appendChild（容器）；
}


super（）
返回元素范围

谷歌文档中说先使用
super（）
是错误的，

它们的意思是：在使用“this”范围引用之前调用
super（）

attachShadow（）
免费设置并返回
this.shadowRoot
.appendChild（）
返回创建的元素

因此，您可以链接所有内容：

constructor（）{
const container=super（）
.attachShadow（{模式：'open'}）
.appendChild（document.createElements（'http://www.w3.org/2000/svg","svg"),；
container.setAttribute（'width'，'400'）；
container.setAttribute（'height'，'300'）；
}

如果您不在内存中对该自定义元素执行任何特殊操作，

您可以废弃整个
构造函数
，并在
connectedCallback

connectedCallback（）{
this.innerHTML=`；
}

注意：我也抛弃了上面的阴影；如果您确实需要shadowDOM，请执行以下操作：

connectedCallback（）{
this.attachShadow（{mode:“open”}）
.innerHTML=`；
}

还有另一个尺寸问题
根据您的字体系列和大小，内联块SVG自定义元素（请参见下面的红色）下方将有一个槽，以允许在基线下方突出的pgjq字符


要解决此问题，必须在SVG元素上设置
垂直对齐：top
：



正文{字体大小：3em}
svg圆圈{背景：红色}
svg圆形svg{
背景：灰色；
显示：内联块；
宽度：80px；
}
#正确的svg{垂直对齐：顶部}
define（“svg圆圈”，类扩展了HtmleElement{
静态get ObservedAttribute（）{return[“x”、“y”、“半径”、“颜色”]}
connectedCallback（）{this.render（）}
attributeChangedCallback（）{this.render（）}
render（）{
让[x=“50%”，y=“50%”，radius=“50%”，color=“Rebeccaparple”]=
this.constructor.observedAttributes.map（x=>this.getAttribute（x）| |未定义）；
this.innerHTML=`
`;
}
});
我是在
TestCanvas
中做的，它也不起作用。我可以在你的问题中编辑这个片段吗？为什么？你可以把它复制到你的答案上。这就是我所做的，你需要修改TestSVG Classis在自定义元素“TestSVG”和“TestCanvas”中，元素类型应该是“canvas”，有2个400x300的盒子，没有自定义元素，因为浏览器可以识别svg和canvas。@curveball，为什么不能将它们识别为自定义元素的一部分？不能使用createElement创建svg元素。您需要使用CreateElements并将svg命名空间指定为