如何为 HTML 创建自定义标签

Question

如何为 HTML 创建具有特殊属性和行为的自定义标签？

原文由 Aktheus 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

HTML5Rocks.com 上有一篇关于如何使用自定义元素的有趣且深入的文章： 自定义元素：在 HTML 中定义新元素

这是有关如何操作的文章的摘录。

实例化元素

创建元素的常用技术仍然适用于自定义元素。与任何标准元素一样，它们可以在 HTML 中声明或使用 JavaScript 在 DOM 中创建。实例化自定义标签

声明他们：

 <x-foo></x-foo>

在 JS 中创建 DOM：

 var xFoo = document.createElement('x-foo');
xFoo.addEventListener('click', function(e) {
  alert('Thanks!');
});

使用新运算符：

 var xFoo = new XFoo();
document.body.appendChild(xFoo);

原文由 Jed Burke 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

根据“特殊属性和行为”的含义，您现在可以“创建”自定义 HTML 标记。以下显示在所有浏览器中，甚至适用于各种 JavaScript 方法：

 <my-book data-pages="400" data-author="Nietzsche">The Wanderer and His Shadow</my-book>

您只需要记住几件事：

1. 连字符！ Custom elements should consist of at least one - like my-book or app-menu or header-title , etc. Just, don’t use data-* 因为它是为 数据属性 保留的。

2. 默认情况下，所有自定义元素都显示为 inline 。但是，您可以使用 CSS 或 JavaScript 更改它。

3. 除非您 首先 使用 JavaScript“创建”它们，否则 Internet Explorer 无法识别这些元素中的任何一个：

     document.createElement('my-book');

因此，在您可以在 CSS、HTML 或 JavaScript 中使用它们 _之前_，您必须这样做。

原文由 sdleihssirhc 发布，翻译遵循 CC BY-SA 4.0 许可协议