我可以使用自定义标记名称而不使用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

请注意:几年后用户评论提示返回此状态,我想指出这已经过时了; 如果问题今天发布,我会给出一个非常不同的答案.在2018年这个勇敢的新年里,人们通常不会被定制元素的想法所吓倒.2016年原始答案如下:

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

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

不使用自定义元素的原因

• 一些旧的浏览器(IE8和之前的版本)只支持使用javascript shim(至少)document.createElement('foo').
• HTML验证程序(或某些尝试验证代码的HTML编辑器)可能会阻塞这些标记或将其解释为错误.这取决于您的工作流程,范围从非发布到完全交易.
• 未来兼容性.根据您选择的标记名称,您发明的任何自定义标记名称在将来的某个时刻都会变得非常有可能成为一个"真正的"html标记,它带有您不期望的特定行为. 2018年更新:当前的约定是在所有自定义元素的名称中包含一个连字符,这样可以消除这种风险; 未来的HTML,SVG和MathML元素将永远不会在其名称中包含连字符.
• 您将不得不花费大量时间向开发人员和维护人员解释说不,没关系,它确实有效,不是不是XML,是的,它可以与屏幕阅读器配合使用,是的,看起来确实很奇怪,但它是完全可以诚实的在规范中是正确的
• 通常没有特别的理由这样做,因为<span class="foo">没有<foo>tsuris就是这样

使用自定义元素的原因

• 因为你能

总的来说,我觉得这不值得.