使用关键字new从类创建自定义元素或使用createElement('div', {is: 'custom-element'})创建自定义元素不具有is:属性.

MDNcreateElementThe new element will be given an is attribute whose value is the custom element's tag name.

但是,当判断它们缺少的is:属性时,这是一个错误吗?

class CustomDiv extends HTMLDivElement {
  constructor() {
    super()
  }
}
customElements.define('custom-element', CustomDiv, {
  extends: 'div'
})

const newElement = new CustomDiv()
document.querySelector('body').append(newElement)

const anotherNewElement = document.createElement('div', {is: 'custom-element'})

document.querySelector('body').append(anotherNewElement)
div {
  height: 40px;
  width: 40px;
  background: black;
  border-radius: 50%;
}

推荐答案

Chromium浏览器(除iOS外的Blink+V8)和Firefox(除iOS外的Gecko+SpiderMonkey)都不会设置is属性.(Safari[WebKit+JavaScriptCore]根本不支持定制的内置元素;1,2.由于iOS是一个有围墙的花园,所有浏览器都必须使用WebKit+JavaScriptCore,所以iOS根本不支持这一点,即使使用Chromium或Firefox也是如此.)

你必须go 挖掘HTML标准讨论档案,但我怀疑MDN那里的信息要么是过时的,要么是尖端的.:-)规范中写道:

可以定义两种不同类型的自定义元素:

  • 自主自定义元素,不使用extends选项进行定义.这些类型的自定义元素具有与其定义的名称相同的本地名称.

  • 一个定制的内置元素,用extends选项定义.这些类型的自定义元素具有与其extends选项中传递的值相同的本地名称,并且其定义的名称用作is属性的值,因此该属性必须是有效的自定义元素名称.

创建自定义元素后,更改is属性值不会更改元素的行为,因为它在元素上保存为is value.

注意短语"is use as",而不是"is set as".(不是非常清楚,但遗憾的是,如果您不是标准委员会成员或经验丰富的浏览器实现者,则HTML规范的lot也不是非常清楚.注:我两者都不是.)

"is价值"链接上写着:

元素具有关联的命名空间、命名空间前缀、本地名称、定制元素状态、定制元素定义、is值.当创建元素时,所有这些值都被初始化.

鉴于"is值"与元素的本地名称、命名空间、自定义元素状态等处于相同的信息级别,并且将元素的基本信息添加到列表中并不是一件轻而易举的事情,我怀疑实际上setting属性被证明不是与Web兼容的,因此他们不得不退回到定义一个新的东西.不过,这只是猜测.同样有可能的是,拥有createElement set属性值是最近的更改,只是实现还没有跟上.

无论采用哪种方法,您都可以通过在构造函数中设置您自己的定制元素来实现它:

class CustomDiv extends HTMLDivElement {
    constructor() {
        super();
        this.setAttribute("is", "custom-element");
    }
}

class CustomDiv extends HTMLDivElement {
    constructor() {
        super();
        this.setAttribute("is", "custom-element");
    }
}
customElements.define("custom-element", CustomDiv, {extends: "div"});

let newElement = new CustomDiv();
newElement.textContent = "Created via constructor";
document.body.append(newElement);

newElement = document.createElement("div", {is: "custom-element"});
newElement.textContent = "Created via createElement";
document.body.append(newElement)

console.log(`Found via [is="custom-element"]:`);
for (const element of document.querySelectorAll("[is=custom-element]")) {
    console.log(`"${element.textContent}"`);
}
<div>Not a custom-element</div>
<div is="custom-element">Defined in HTML</div>

如果你想这样做,你不能使用属性 Select 器,除非标签被直接用来创建元素,否则标签 Select 器是不会工作的.您可以搜索基本元素并对列表进行筛选,使其仅包括作为自定义元素实例的那些元素:

const custom = [...document.querySelectorAll("div")]
    .filter((el) => el instanceof CustomDiv);

class CustomDiv extends HTMLDivElement {
    constructor() {
        super();
    }
}
customElements.define("custom-element", CustomDiv, {extends: "div"});

let newElement = new CustomDiv();
newElement.textContent = "Created via constructor";
document.body.append(newElement);

newElement = document.createElement("div", {is: "custom-element"});
newElement.textContent = "Created via createElement";
document.body.append(newElement)

console.log(`Found via [is="custom-element"]:`);
for (const element of document.querySelectorAll("[is=custom-element]")) {
    console.log(`"${element.textContent}"`);
}
console.log("NOTE: Not all of them were found by the above");

console.log(`Found via query for divs filtered by inheriting from CustomDiv:`);
for (const element of [...document.querySelectorAll("div")].filter((el) => el instanceof CustomDiv)) {
    console.log(`"${element.textContent}"`);
}
<div>Not a custom-element</div>
<div is="custom-element">Defined in HTML</div>

遗憾的是,这两种方法都不能在不支持它们的环境中工作(除了显式定义为is的元素上的属性 Select 器).

Javascript相关问答推荐

在JavaScript中检索一些文本

React Hooks中useState的同步问题

将字符串UTC Date转换为ngx—counting leftTime配置值的数字

我的服务工作器没有连接到我的Chrome扩展中的内容脚本.我该怎么解决这个问题?

setcallback是什么时候放到macrotask队列上的?

如何将Openjphjs与next.js一起使用?

JSDoc创建并从另一个文件导入类型

Websocket错误—有一个或多个保留位开启:reserved1 = 1,reserved2 = 0,reserved3 = 0

PDF工具包阿拉伯字体的反转数字

变量的值在Reaction组件中的Try-Catch语句之外丢失

ChartJs未呈现

使用Nuxt Apollo在Piniastore 中获取产品细节

使用Document.Evaluate() Select 一个包含撇号的HTML元素

在查看网页时,如何使HTML中的按钮工作方式类似于鼠标上的滚轮或箭头键?

P5.js中的分形树

rxjs在每次迭代后更新数组的可观察值

对不同目录中的Angular material 表列进行排序

JavaScript:多个图像错误处理程序

从客户端更新MongoDB数据库

如何在preLoad()中自定义p5.js默认加载动画?