如何为 HTML 创建自定义标签

问题描述 投票:0回答:7

如何为 HTML 创建具有特殊属性和行为的自定义元标记?

html tags
7个回答
65
投票

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

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

您必须记住以下几点:

  1. 连字符!自定义元素应至少由一个

    -
    组成,例如
    my-book
    app-menu
    header-title
    等。只是,不要使用
    data-*
    ,因为它是为 data- 属性 保留的。

  2. 所有自定义元素默认显示为

    inline
    。不过,您可以使用 CSS 或 JavaScript 更改它。

  3. Internet Explorer 无法识别任何这些元素,除非您首先使用 JavaScript“创建”它们:

     document.createElement('my-book');
    

因此,您必须先这样做然后才能在 CSS、HTML 或 JavaScript 中使用它们。


56
投票
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);
    

21
投票
您真正需要做的就是为该标签定义 CSS 内容。

示例:

mytag { font-weight: bold; }
现在 

mytag 是你自己的粗体:

<mytag>This text is in bold</mytag>
    

12
投票
现在有一个新兴的

W3C 标准规范,称为 Web 组件自定义元素,它使开发人员能够创建自己的自定义 HTML 元素并将其注册到浏览器解析器。

Mozilla 开发了一个名为 X-Tag 的库,它使创建和使用自定义元素的过程变得非常简单,请查看:

X-Tags.org


4
投票
还有一个版本

支持Chrome 54和Opera

示例:

class BasicElement extends HTMLElement { connectedCallback() { this.textContent = 'Just a basic custom element.'; } } customElements.define('basic-element', BasicElement);
您可以在

此处了解更多相关信息。


2
投票
您可以通过以下步骤创建自定义 HTML 标签:

第 1 步 - 注册一个新的

元素。自定义元素是使用 document.registerElement() 创建的:

var XFoo = document.registerElement('x-foo', { prototype: Object.create(HTMLElement.prototype) });
registerElement 中的第二个参数是可选对象,它描述元素的原型。

第 2 步 - 实例化自定义标签

有几种方法可以做到这一点:

声明它们:

<x-foo></x-foo>
在 JavaScript 中创建 DOM:

var xFoo = document.createElement('x-foo'); xFoo.addEventListener('click', function(e) { alert('Thanks!'); });
使用新运算符:

var xFoo = new XFoo();
第 3 步 - 使用 

document 附加新创建的元素

document.body.appendChild(new XFoo());
完整示例:

var XFooProto = Object.create(HTMLElement.prototype); // 1. Give x-foo a foo() method. XFooProto.foo = function() { alert('foo() called'); }; // 2. Define a property read-only "bar". Object.defineProperty(XFooProto, "bar", {value: 5}); // 3. Register x-foo's definition. var XFoo = document.registerElement('x-foo', {prototype: XFooProto}); // 4. Instantiate an x-foo. var xfoo = document.createElement('x-foo'); // 5. Add it to the page. document.body.appendChild(xfoo);
    

0
投票

<x-foo><x-foo> <script> var tag = document.querySelector('x-foo'); tag.addEventListener('click', function(e) { alert('Thanks!'); });tag.innerHTML = "<button>X-Foo</button>"</script>

试试这个

© www.soinside.com 2019 - 2024. All rights reserved.