创建html自定义标签,如何为htm创建自定义标签

您可以按照以下步骤创建自定义html标签：

步骤1-注册一个新元素。 使用document.registerElement()创建自定义元素：

var XFoo = document.registerElement('x-foo', {

prototype: Object.create(HTMLElement.prototype)

});

registerElement中的第二个参数是可选对象，它描述元素的原型。

第2步-实例化自定义标签这样做的几种方法：声明它们：

在JS中创建DOM：

var xFoo = document.createElement('x-foo');

xFoo.addEventListener('click', function(e) {

alert('Thanks!');

});

使用新的运算符：

var xFoo = new XFoo();

步骤3-将新创建的元素附加到文档

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