Chromium浏览器(除iOS外的Blink+V8)和Firefox(除iOS外的Gecko+SpiderMonkey)都不会设置is
属性.(Safari[WebKit+JavaScriptCore]根本不支持定制的内置元素;1,2.由于iOS是一个有围墙的花园,所有浏览器都必须使用WebKit+JavaScriptCore,所以iOS根本不支持这一点,即使使用Chromium或Firefox也是如此.)
你必须go 挖掘HTML标准讨论档案,但我怀疑MDN那里的信息要么是过时的,要么是尖端的.:-)规范中写道:
可以定义两种不同类型的自定义元素:
创建自定义元素后,更改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 器).