我可以使用自定义标记名称而不使用Web组件,仅用于样式化吗?

时间:2016-01-25 19:56:14

标签: html css web-component

令我惊讶的是,如果我使用自定义标记名称,现代浏览器似乎不会抱怨,然后将这些标记设置为正常html标记的样式,它们的行为类似于span元素,并且像div元素一样,如果我设置{{1 }}

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

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

display: block;

有些css:

<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>

1 个答案:

答案 0 :(得分:5)

请注意:几年后用户评论提示返回此状态,我想指出这已经过时了;如果问题今天发布,我会给出一个非常不同的答案。在2018年的新年里,人们通常不会因为自定义元素的想法而感到害怕。2016年的原始答案如下:

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

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

不使用自定义元素的原因

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

使用自定义元素的原因

  • 因为你可以

总的来说,我觉得它不值得。