我可以使用自定义标签名称而不使用 Web 组件，仅用于样式设置吗？

令我惊讶的是，如果我使用自定义标签名称，然后将这些标签的样式设置为普通 html 标签的样式，现代浏览器似乎不会抱怨，它们的行为就像 span 元素，并且像 div 元素，如果我设置display: block;.

我的意思是，即使我不使用聚合物，或者尝试注册自定义元素。

例如，我有这个：https://jsfiddle.net/hvybz0nq/4/ https://jsfiddle.net/hvybz0nq/4/

<flex-fixed>
  <sections>
    <section>Section 1</section>
    <section>Section 2</section>
    <section>Section 3</section>
    <div>Add Section</div>
  </sections>
  <splitter></splitter>
  <pages>
    <page>Page 1</page>
    <page>Page 2</page>
    <page>Page 3</page>
    <div>Add Page </div>
  </pages>
</flex-fixed>

加上一些CSS：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

flex-fixed, sections, section, div, pages, page {
  display: flex;
}

body {
  height: 100vh;
}

flex-fixed {
  width: 100%;
  height: 100%;
  flex-direction: column; 
  position: fixed;
}

section {
  border-right: 1px solid lightgrey;
}

splitter {
  height: 1px;
  background: lightgrey;
}

pages {
  height: 100%;
  border-left: 1px solid lightgrey;
  align-self:flex-end; 
  flex-direction: column;
}

page {
  border-bottom: 1px solid lightgrey;
}

section, page, div {
  padding: 10px;
}

请注意：几年后，由用户评论提示返回此内容，我想指出这已经过时了；如果这个问题今天发布，我会给出一个非常不同的答案。在 2018 年的美好新年里，人们通常不会对自定义元素的想法感到害怕。2016 年的原始答案如下：

你绝对可以做到这一点。它会起作用的。自定义元素是HTML5 规范 http://w3c.github.io/webcomponents/spec/custom/;包括对未注册自定义元素的显式支持（参见第 7 节）。所有现代浏览器都支持它们（默认情况下它们被视为内联元素，就像<span>），例如 Angular.js 中对它们有一流的支持。从功能上来说，两者之间没有任何区别<foo> and <span class="foo">.

那么你应该吗？我把它分解如下：

不使用自定义元素的原因

• 一些较旧的浏览器（IE8 及更早版本）仅在您使用 javascript shim 时才支持它们（至少document.createElement('foo').)
• HTML 验证器（或某些尝试验证代码的 HTML 编辑器）可能会因这些标签而阻塞或将其解释为错误。这范围从不存在问题到完全破坏交易，具体取决于您的工作流程。
• 未来的兼容性。根据您选择的标签名称，您发明的任何自定义标签名称在将来的某个时刻都有可能成为“真正的”html 标签，该标签具有您不期望的特定行为。2018年更新：当前的惯例是在所有自定义元素的名称中包含连字符，这消除了这种风险；未来的 HTML、SVG 和 MathML 元素的名称中永远不会包含连字符。
• 您将不得不花费大量时间向惊愕的开发人员和维护人员解释不，这很好，它确实有效，不，它不是 XML，是的，它可以与屏幕阅读器一起使用，是的，它看起来确实很奇怪，但老实说，它完全没问题规范中有正确的
• 通常没有特别的理由这样做，因为<span class="foo">做同样的事情<foo>没有 tsuris

使用自定义元素的原因

• 因为你能

总的来说，我觉得不值得。