什么是 HTML“是”属性？答案

【问题标题】：What is HTML "is" attribute?什么是 HTML“是”属性？
【发布时间】：2015-02-10 14:53:26
【问题描述】：

我在这里和那里看到了很多，但我可以找到任何关于它的描述或文档！

<paper-input-decorator label="Your Name">
    <input is="core-input">
</paper-input-decorator>

【问题讨论】：

标签： html dom

【解决方案1】：

它是 Web Components' 自定义元素的 W3C 草案规范的一部分。

【讨论】：

【解决方案2】：

2020 年：

is 属性现在是Custom Elements specification 中 HTML 规范的一部分。

它遵循聚合物规范，并在mdn 为开发人员记录。

只有 Edge 仍未更新以包含此规范，但它基于铬的新实施，在 2020 年，它的可用性可能become widespread。

2017 年：

HTML 中没有is 属性。

这是一个出现在Custom Elements specification 中的提议扩展（它是从下面提到的 Polymer 规范演变而来的）。

它允许您说现有的标准元素实际上是自定义元素。

<button is="fancy-button" disabled>Fancy button!</button>

... 允许向后兼容。如果浏览器不支持自定义元素（规范仍然是草稿并且有very limited browser support），那么它将回退到默认行为。

2014 年：

它不是 HTML。它是Polymer custom elements 的扩展属性。

如果您使用 extends 创建派生自现有 DOM 元素（HTMLElement 以外的其他元素）的 Polymer 元素，请使用 is 语法

【讨论】：

2020 年，is 属性在 Safari 中仍然不支持：caniuse.com/#search=is%20attribute，caniuse.com/#search=custom%20elements

【解决方案3】：

is 关键字是 W3C 草案规范的一部分，用于创建具有自定义行为的自定义 HTML 元素。

具体来说，is 用于扩展像 <input>、<button> 或 <table> 这样的内置元素。例如，您可以拥有一个扩展 <button> 的 plastic-button 元素，以便在单击时提供一些精美的动画。

您可以像这样将按钮添加到页面：

<button is="plastic-button">Click Me!</button>

在执行此操作之前，您需要将 plastic-button 注册为自定义 HTML 元素，如下所示：

customElements.define("plastic-button", PlasticButton, { extends: "button" });

这引用了一个PlasticButton Javascript 类，它看起来像这样：

class PlasticButton extends HTMLButtonElement {
  constructor() {
    super();

    this.addEventListener("click", () => {
      // Draw some fancy animation effects!
    });
  }
}

如果你可以说 <plastic-button>Click Me!</plastic-button> 而不是 <button is="plastic-button">Click Me!</button>，那就太好了，但这会创建一个没有特殊行为的 HTMLElement。

如果您不扩展像 <button> 这样的内置 HTML 元素，而是创建一个扩展通用 HTMLElement 的新元素，您可以使用 <plastic-button> 语法。但是你不会得到<button> 的任何行为。

这是 Web 组件自定义元素的 W3C 草案规范的一部分： http://www.w3.org/TR/custom-elements/#type-extension-semantics

【讨论】：

【解决方案4】：

您使用is 属性来标记一个自定义的内置元素，一个自定义元素 扩展一个内置元素 .

有两种类型的自定义元素：

自主自定义元素是独立的——它们不继承自标准 HTML 元素。您可以通过将它们写成 HTML 元素来在页面上使用它们。例如<popup-info>，或document.createElement("popup-info")。

自定义的内置元素继承自基本的 HTML 元素。要创建其中之一，您必须指定它们扩展的元素（如上面示例中所暗示的那样），并且通过写出基本元素但在 is 属性（或属性）中指定自定义元素的名称来使用它们）。例如<p is="word-count">，或document.createElement("p", { is: "word-count" })。

_{https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements}

【讨论】：

【解决方案5】：

它是 web components 自定义元素规范的一部分。所以它是 HTML。

Vue.js 等框架也支持 is 属性，符合 Web 组件标准。

【讨论】：