实例化元素

创建元素的常用技术仍适用于自定义元素。与任何标准元素一样，它们可以用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);

Answer 2

根据“特殊属性和行为”的含义，您可以立即“创建”自定义HTML标记。以下内容显示在所有浏览器中，甚至可以使用各种JavaScript方法：

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

您必须记住几件事：

<强>断字！自定义元素应包含至少一个-，例如my-book或app-menu或header-title等。只是，不要使用data-*，因为它是为数据属性。
默认情况下，所有自定义元素的显示均为inline。但是，您可以使用CSS或JavaScript更改它。
除非您首先使用JavaScript“创建”它们，否则Internet Explorer无法识别任何这些元素：
```
document.createElement('my-book');
```

所以你必须在之前完成，你可以在CSS，HTML或JS中使用它们。

Answer 3

您真正需要做的就是为该标签定义css

示例：

mytag {
font-weight: bold;
}

现在mytag是你自己的大胆：

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

Answer 4

现在出现了一种新兴的W3C标准规范，称为Web Component Custom Elements，它使开发人员能够创建自己的自定义HTML元素并使用浏览器解析器注册它们。 Mozilla开发了一个名为X-Tag的库，它使创建和处理自定义元素的过程非常简单，请查看：X-Tags.org

Answer 5

您可以使用以下步骤创建自定义html标记：

步骤1-注册新元素。使用document.registerElement（）：

创建自定义元素

var XFoo = document.registerElement('x-foo', {
    prototype: Object.create(HTMLElement.prototype)
});

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

步骤2-实例化自定义标签有几种方法：声明他们：

<x-foo></x-foo>

在JS中创建DOM：

var xFoo = document.createElement('x-foo');
xFoo.addEventListener('click', function(e) {
    alert('Thanks!');
});

使用new运算符：

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

Answer 6

还有一个版本仅在Chrome 54和Opera中支持。

示例：

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

您可以详细了解此here

Answer 7

您可以使用javascript：document.createElement('element')

如何为html创建自定义标签

7 个答案:

实例化元素