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

Question

有些人似乎喜欢重写

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

作为

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

是否有任何与技术或规格相关的理由不这样做？请注意，我纯粹是在谈论在 HTML 和 CSS 级别上进行更改；尚未使用自定义元素 API 定义元素。

Answer 1

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

语义

首先，自定义元素通常会破坏 DOM 结构的语义。当自定义元素被正确使用时，您会获得很多权力作为回报，但是这样您就放弃了语义而没有任何好处。而是使用正确的 HTML5 元素，例如 <header>、<article> 等。

未定义的自定义元素状态

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

“未定义”（未定义，非自定义）

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

在自定义元素规范之前，定义此类元素非常危险，因为存在未来版本的 HTML 会实现它的风险，但现在所有带有 - 的元素都保留给自定义元素。

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

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

即便如此，你仍然会得到一个状态为 undefined 的元素。