使用 JavaScript 创建自定义标签/属性

Question

我需要在 HTML 中创建自定义标签。根据我在w3schools 上阅读的内容，您可以使用<!ATTLIST myattribute type CDATA> 让文档保持有效。是否可以在使用 JavaScript 时添加此标签？

Answer 1

为什么是的，是的you can。事实上，它们是web components 标准的稳定部分。

自定义元素是一种创建您自己的自定义 HTML 的功能 元素。他们可以有自己的脚本行为和 CSS 样式。 它们是 Web 组件的一部分，但也可以单独使用。

可能不清楚为什么新的自定义元素功能是 已创建，因为已经可以创建像 <mytag> 这样的标签名称 并使用 CSS 设置样式，然后使用脚本将行为附加到它。 自定义元素的一个优势是它们的生命周期反应， 这允许将行为附加到新的不同部分 元素的“生命周期”。例如，可以附加某种行为 当元素插入 DOM（“已连接”）时，以及 从 DOM 中移除时的不同行为（“断开连接”）， 或者当它的属性发生变化时。

示例

// Create a class for the element
class XProduct extends HTMLElement {
  constructor() {
    // Always call super first in constructor
    super();

    // Create a shadow root
    var shadow = this.attachShadow({mode: 'open'});

    // Create a standard img element and set its attributes.
    var img = document.createElement('img');
    img.alt = this.getAttribute('data-name');
    img.src = this.getAttribute('data-img');
    img.width = '150';
    img.height = '150';
    img.className = 'product-img';

    // Add the image to the shadow root.
    shadow.appendChild(img);

    // Add an event listener to the image.
    img.addEventListener('click', () => {
      window.location = this.getAttribute('data-url');
    });

    // Create a link to the product.
    var link = document.createElement('a');
    link.innerText = this.getAttribute('data-name');
    link.href = this.getAttribute('data-url');
    link.className = 'product-name';

    // Add the link to the shadow root.
    shadow.appendChild(link);
  }
}

// Define the new element
customElements.define('x-product', XProduct);

body {
  background: #F7F7F7;
}

x-product {
  display: inline-block;
  float: left;
  margin: 0.5em;
  border-radius: 3px;
  background: #FFF;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  font-family: Helvetica, arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

x-product::slotted(.product-img) {
  cursor: pointer;
  background: #FFF;
  margin: 0.5em;
}

x-product::slotted(.product-name) {
  display: block;
  text-align: center;
  text-decoration: none;
  color: #08C;
  border-top: 1px solid #EEE;
  font-weight: bold;
  padding: 0.75em 0;
}

If nothing appeared below, then your browser does not support Custom Elements yet.
<x-product data-name="Ruby" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/ruby.png" data-url="http://example.com/1"></x-product>
<x-product data-name="JavaScript" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/javascript.png" data-url="http://example.com/2"></x-product>
<x-product data-name="Python" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/python.png" data-url="http://example.com/3"></x-product>