我可以定义自己的自定义HTML元素以用于css和js吗？

Question

我一直在阅读所有关于这些热门的新自定义HTML元素 ，你可以使用今天的浏览器; 说实话，这似乎很有趣。 不过，我已经看到营地在这个营地了; 关于是否使用它们存在很多争论。

但那不是我的问题！

我已经看到，为了使用自定义HTML元素，你必须先用javascript声明元素; 但我发现情况并非如此。

我只是使用以下代码运行HTML文档;

<div>
   <header-label>Text</header-label>
</div>

它在Chrome（ 40 ），FireFox（ 40 ），Internet Explorer 11和Edge中运行良好。

所以我比以前更困惑; 到底是怎么回事？ 我是否需要申报？ 即使是CSS ，jQuery选择器，角度指令也是如此; 我找不到任何让我相信这只是普通HTML元素的东西。

Answer 1

A）用户定义的标签

您可以在任何地方使用用户定义的标签。

如果你想把<header-label>放在你面前。 还有自定义的HTML5属性

<input name="q" placeholder="Go to a Website">

要么

<input type="email">

我进一步调查并阅读了博客文章的评论并了解了...

B）HTML5自定义元素：

根据http://www.html5rocks.com/en/tutorials/webcomponents/customelements/

这些让你做的事情

<hangout-module>
  <hangout-chat from="Paul, Addy">
    <hangout-discussion>
      <hangout-message from="Paul" profile="profile.png"
          profile="118075919496626375791" datetime="2013-07-17T12:02">
        <p>Feelin' this Web Components thing.</p>
        <p>Heard of it?</p>
      </hangout-message>
    </hangout-discussion>
  </hangout-chat>
  <hangout-chat>...</hangout-chat>
</hangout-module>

否则这些将被忽略（尽管它们中的内容和有效标签仍将呈现而没有问题），但是您可以将这些元素添加为有效的DOM元素：

var XFoo = document.registerElement('x-foo');
document.body.appendChild(new XFoo());

您还可以在现有元素上基于用户定义的元素来扩展它，例如

var MegaButton = document.registerElement('mega-button', {
  prototype: Object.create(HTMLButtonElement.prototype),
  extends: 'button'
});