Html 如何为html创建自定义标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5682943/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create custom tags for html
提问by Aktheus
I'd like to learn how to create custom tags for html, with special attributes and behavior, if someone can give advice I'd be the most grateful.
我想学习如何为 html 创建自定义标签，具有特殊的属性和行为，如果有人可以提供建议，我将不胜感激。
采纳答案by Jed Burke
There's an interesting and in depth article from HTML5Rocks.com on how to work with custom elements : Custom Elements: Defining New Elements in HTML
HTML5Rocks.com 上有一篇关于如何使用自定义元素的有趣且深入的文章：自定义元素：在 HTML 中定义新元素
Here's an excerpt from the article on how to do it.
这是关于如何做到这一点的文章的摘录。
Instantiating elements
实例化元素
The common techniques of creating elements still apply to custom elements. As with any standard element, they can be declared in HTML or created in DOM using JavaScript. Instantiating custom tags
创建元素的常用技术仍然适用于自定义元素。与任何标准元素一样，它们可以在 HTML 中声明或使用 JavaScript 在 DOM 中创建。实例化自定义标签
Declare them:
声明它们：
<x-foo></x-foo>
Create DOM in JS:
在 JS 中创建 DOM：
var xFoo = document.createElement('x-foo');
xFoo.addEventListener('click', function(e) {
alert('Thanks!');
});
Use the new operator:
使用新运算符：
var xFoo = new XFoo();
document.body.appendChild(xFoo);
回答by sdleihssirhc
Depending on what you mean by "special attributes and behavior," you can "create" custom HTML tags right now. The following shows up in all browsers, and even works with the various JavaScript methods:
根据“特殊属性和行为”的含义，您可以立即“创建”自定义 HTML 标记。以下显示在所有浏览器中，甚至适用于各种 JavaScript 方法：
<my-book data-pages="400" data-author="Nietzsche">The Wanderer and His Shadow</my-book>
There are just a couple things you have to keep in mind:
您必须记住以下几点：
Hyphenation! Custom elements should consist of at least one
-likemy-bookorapp-menuorheader-titleetc. Just, don't usedata-*since it's reserved for data- attributes.All custom elements have a display of
inlineby default. You can change that with CSS or JavaScript, however.Internet Explorer does not recognize any of these elements unless you first"create" them with JavaScript:
document.createElement('my-book');
连字符！自定义元素应该至少包含一个
-likemy-book或app-menuorheader-title等。只是，不要使用，data-*因为它是为data-attributes保留的。inline默认情况下，所有自定义元素都显示。但是，您可以使用 CSS 或 JavaScript 更改它。Internet Explorer 无法识别这些元素中的任何一个，除非您首先使用 JavaScript “创建”它们：
document.createElement('my-book');
So you have to do that beforeyou can use them in your CSS, HTML, or JS.
因此，您必须先这样做，然后才能在 CSS、HTML 或 JS 中使用它们。
回答by tylerr147
All you really have to do is define css for that tag
您真正需要做的就是为该标签定义 css
example:
例子：
mytag {
font-weight: bold;
}
and now the mytag is your own bold:
现在 mytag 是你自己的粗体：
<mytag>This text is in bold</mytag>
回答by csuwldcat
There is now an emerging W3C standard spec, called Web Component Custom Elements, that enables developers to create their own custom HTML elements and register them with the browser parser. Mozilla has developed a library, named X-Tag, that makes the process of creating and working with custom elements super easy, check it out: X-Tags.org
现在有一个新兴的 W3C 标准规范，称为Web 组件自定义元素，它使开发人员能够创建自己的自定义 HTML 元素并将它们注册到浏览器解析器。Mozilla 开发了一个名为 X-Tag 的库，它使创建和使用自定义元素的过程变得非常简单，请查看：X-Tags.org
回答by Anurag Ratna
You can create custom html tags with following steps:
您可以通过以下步骤创建自定义 html 标签：
Step 1- Register a new Element. Custom elements are created using document.registerElement():
第 1 步 - 注册一个新元素。使用 document.registerElement() 创建自定义元素：
var XFoo = document.registerElement('x-foo', {
prototype: Object.create(HTMLElement.prototype)
});
2nd argument in registerElement is optional object which describes the element's prototype.
registerElement 中的第二个参数是可选对象，它描述了元素的原型。
Step 2- Instantiating custom tags Several ways to do so: Declare them:
第 2 步 - 实例化自定义标签有几种方法： 声明它们：
<x-foo></x-foo>
Create DOM in JS:
在 JS 中创建 DOM：
var xFoo = document.createElement('x-foo');
xFoo.addEventListener('click', function(e) {
alert('Thanks!');
});
Use the new operator:
使用新运算符：
var xFoo = new XFoo();
Step 3- Attach the newly created element with document
步骤 3- 将新创建的元素附加到文档中
document.body.appendChild(new XFoo());
Complete example:
完整示例：
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);
回答by Felipe Alarcon
There is also a version which is ONLY supported in Chrome 54 and Opera.
还有一个版本仅在 Chrome 54 和 Opera 中受支持。
Example:
例子：
class BasicElement extends HTMLElement {
connectedCallback() {
this.textContent = 'Just a basic custom element.';
}
}
customElements.define('basic-element', BasicElement);
You can learn more about this here
您可以在此处了解更多信息
回答by Oliver Ni
you can use javascript: document.createElement('element')
你可以使用javascript： document.createElement('element')
