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'
});

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

1 个答案:

A）用户定义的标签

B）HTML5自定义元素：