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

Question

令我惊讶的是，如果我使用自定义标签名称，现代浏览器似乎不会提示，然后将这些标签设置为普通 html 标签的样式，如果我设置 ，它们的行为就像 span 元素和 div 元素显示: 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

请注意:用户评论提示几年后返回此内容，我想指出这是过时的；如果问题是今天发布的，我会给出一个截然不同的答案。在勇敢的 2018 年新年，人们通常不会那么害怕自定义元素的想法。2016 年的原始答案如下:

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

你也应该这样吗？我把它分解成这样:

不使用自定义元素的原因

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

使用自定义元素的原因

• 因为你可以

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