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

2023年3月8日 165次阅读

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

但那不是我的问题！

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

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

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

它在Chrome(40),FireFox(40),Internet Explorer 11和Edge中运行良好.

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

最佳答案 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'
});
点赞