您可以按照以下步骤创建自定义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);