出于好奇，如果您不使用元素的 ID 或类，而是简单地使用 JS 创建自定义元素并使用 CSS 对它们进行样式化，那么它将对网站或页面产生什么影响（如果有的话）？
例如，如果我创建一个元素“容器”并将其用作<container> 而不是<div class="container">，是否存在性能差异或什么？
我没有看到它经常被使用，我想知道为什么？
【问题讨论】：
标签： javascript html css createelement
如果自定义元素使您的 HTML 更易于阅读和管理，请继续使用它们。
自从提出这个问题以来，自定义元素已添加到 WHATWG HTML Living Standard，以及相关的 JavaScript API。一些 Web 组件框架已经在实现其中的一些规范。它不再像 2011 年那样成为禁忌。（我记得在尝试使用新发布的 HTML5 元素时，在处理 Internet Explorer 中的 DOM 时遇到了一些不愉快的问题。）
截至撰写本文时（2018 年 11 月），自定义元素已在多个主要浏览器中实现。然而，MDN 将 Microsoft Edge 列为尚未实现自定义元素，尽管 blog post from 2015 表示 Edge 团队“很高兴继续支持并为这一旅程做出贡献”。
【讨论】：
这就像在说“如果我尊重英语的句法和语法，但是把所有的词都编出来怎么办？”虽然这种想法促成了good poetry，但它并不适合技术领域；）
HTML 有一组已定义的标记，它们是valid。如果使用任何编造的标签，则无效。
现在，这并不意味着您无法摆脱它； on the World Wide Web forgiveness is the default 因此，如果您使用自己编写的标签，那不会是世界末日……但这仍然是一个坏主意，因为您无法保证浏览器如何处理这些标签。
因此，唯一真正的答案是“如果不使用 ID 或类作为元素，您只需使用 JS 创建自定义元素并使用 CSS 对它们进行样式化，它将对页面产生什么影响？” 任何事情都可能发生。 由于您将使用非标准的 HTML 元素，您最终会得到非标准的结果，这是我们任何人都不应该尝试和预测的。
如果您真的想（和/或需要）使用自定义元素，请查看 XML。在 XML 中，您可以“组成”您的标签，但仍然可以应用 CSS 并在浏览器中打开文档。
例如，保存以下两个文件，然后在浏览器中打开 XML 文件：
<?xml-stylesheet href="style.xml.css"?>
<example>
<summary>
This is an example of making up tags in XML, and applying a stylesheet so you can open the file in a browser.
</summary>
<main>
<container>This is the stuff in the container</container>
</main>
</example>
summary {
display:none;
}
main container {
border:2px solid blue;
background:yellow;
color:blue;
}
【讨论】：
HTML 是一种已定义的语言，其元素和标签在格式内具有一定的含义。您不能发明新元素，不仅因为浏览器可能会不一致地渲染这些元素，还因为文档的含义和结构变得无效。
您最好使用对您希望传递的内容具有正确含义的元素。如果您需要一个通用容器来进行样式设置，那么正确的元素是 div。有类似的元素也提供了一些语义含义。我建议查看 HTML 标记索引和 HTML5 医生以帮助选择正确的元素。
听起来<div class="container">...</div> 与您的简要描述最接近。
【讨论】：
HTML 是标准化的，您不能简单地发明新元素。一些浏览器会呈现它们无法识别的元素的文本内容，但并非所有浏览器都会呈现，在这种情况下，您的 HTML 将不是有效的 HTML。
【讨论】：
<section> 或 <article>）中呈现“未知”HTML5 元素的问题，但您的观点仍然正确。主要风险是有一天有人可能会认为<container> 的意思是“紫色兔子的闪烁图片”或其他什么。