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

Question

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

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

例如，我有这个： 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;
}

Answer 1

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

你绝对可以做到。它会起作用。自定义元素是 HTML5 spec 的一部分；包括对未注册的自定义元素的明确支持（参见第 7 节）。所有现代浏览器都支持它们（默认情况下它们被视为内联元素，就像 <span> 一样），例如 Angular.js 对它们的支持 first-class。从功能上讲，<foo> 和 <span class="foo"> 之间没有任何区别。

你也应该这样吗？我是这样分解的：

不使用自定义元素的原因

如果您使用 javascript shim（至少 document.createElement('foo')），某些较旧的浏览器（IE8 和更早版本）将仅支持它们。
HTML 验证器（或某些 HTML 试图验证您的代码的编辑器）可能会阻塞这些标签或将它们解释为错误。范围从 non-issue 到总计 deal-breaker，具体取决于您的工作流程。
未来的兼容性。根据您选择的标签名称，您发明的任何自定义标签名称都有非零的机会在未来的某个时候成为带有特定行为的 "real" html 标签没想到。 2018年更新：目前的惯例是在所有自定义元素的名称中包含一个连字符，这消除了这种风险；未来 HTML、SVG 和 MathML 元素将永远不会在其名称中包含连字符。
你将不得不花很多时间向开发人员和维护人员解释不，这很好，它确实有效，不，不是 XML，是的，它可以与屏幕阅读器一起工作，是的确实看起来很奇怪，但它完全没问题，老实说，规范中是正确的
通常没有特别的理由这样做，因为 <span class="foo"> 与没有 tsuris

<foo>

使用自定义元素的原因

因为你可以

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

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

Can I use custom tag names, without using web components, just for styling?

html

css

web-component