是否有技术原因不使用未定义的自定义元素？

Question

有些人似乎想重写

<div id="homepage">[...]</div>

作为

<app-homepage>[...]</app-homepage>

是否有任何技术或规格相关的原因不这样做？请注意，我只是在谈论在HTML和CSS的层面上改变它;尚未使用自定义元素API定义元素。

Answer 1

Tl; dr：不要这样做。使用自定义元素规范来制作它。将HTML语法拼凑在一起并不是它的用法。

语义

首先，自定义元素通常可以打破DOM结构的语义。当正确使用自定义元素时，您会获得大量的回报，但这样您就会放弃语义而没有任何好处。而是使用正确的HTML5元素，例如<header>，<article>等

未定义的自定义元素状态

根据自定义元素规范，此类元素的自定义元素状态为

  

“undefined”（未定义，不是自定义）

现在，HTML规范的工作方式任何未被识别的元素都有定义的行为，只创建一个默认的未定义HTML元素实例。

直到自定义元素规范定义这些元素是非常危险的，因为存在未来版本的HTML实现它的风险，但现在所有带有-的元素都保留给自定义元素。< / p>

这是否意味着您完全安全？不，因为您将自己置于与所有其他自定义元素相同的名称空间中。与外部样式表不同，没有正确的方法来命名它们，所以如果你想做这样的事情，你将不得不编写像

这样的代码。

<my-app-name-homepage>[...]</my-app-name-homepage>

即使这样，你仍然会得到一个undefined状态的元素。