如何为 HTML 创建具有特殊属性和行为的自定义元标记?
根据“特殊属性和行为”的含义,您现在可以“创建”自定义 HTML 标签。以下内容显示在所有浏览器中,甚至适用于各种 JavaScript 方法:
<my-book data-pages="400" data-author="Nietzsche">The Wanderer and His Shadow</my-book>
您必须记住以下几点:
连字符!自定义元素应至少由一个
-
组成,例如 my-book
或 app-menu
或 header-title
等。只是,不要使用 data-*
,因为它是为 data- 属性 保留的。
所有自定义元素默认显示为
inline
。不过,您可以使用 CSS 或 JavaScript 更改它。
Internet Explorer 无法识别任何这些元素,除非您首先使用 JavaScript“创建”它们:
document.createElement('my-book');
因此,您必须先这样做然后才能在 CSS、HTML 或 JavaScript 中使用它们。
实例化元素
声明它们:
<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);
示例:
mytag {
font-weight: bold;
}
现在 mytag 是你自己的粗体:
<mytag>This text is in bold</mytag>
W3C 标准规范,称为 Web 组件自定义元素,它使开发人员能够创建自己的自定义 HTML 元素并将其注册到浏览器解析器。
Mozilla 开发了一个名为 X-Tag 的库,它使创建和使用自定义元素的过程变得非常简单,请查看:第 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);
<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>
试试这个