识别没有is =属性的自定义内置元素

Question

在我的Chessly.github.io项目中，我使用定制的内置IMG元素来定义SVG棋子：

问题：如何区分常规IMG和定制IMG？

document.body.append(
  document.createElement("IMG", { 
    is: "white-queen"
  });
);

这将创建一个棋子，但未设置is=属性

我现在自己明确设置了is=属性，但是由于此属性不起作用并且可以设置为任何值（我在自定义元素代码中将is用作观察的属性），因此在遍历DOM时将IMG元素与自定义IMG元素区分开的可靠方法。

如果我要推广兵（替换img src）

<img is=white-pawn/>

与element.setAttribute("is","white-queen")

我如何确定这件作品最初是白色棋子？
在“自定义元素”注册表中，它仍然是白色的棋子。

我在俯视什么吗？

JSFiddle中的简化代码（具有基本SVG形状）：https://jsfiddle.net/dannye/k0va2j76/

更新：代码（基于下面的正确答案）

let isExtendedElement = x => 
      Object.getPrototypeOf(x).__proto__.constructor.name !== 'HTMLElement';

注释！！这不会捕获自治自定义元素！

也许更好：

let isBaseElement = x =>
    Object.getPrototypeOf(Object.getPrototypeOf(x)).__proto__.constructor.name=='Element';

Answer 1

我认为，明确地添加is属性是目前的最佳解决方案。

否则，您将不得不处理类引用。就您而言：

yourElement.constructor === customElements.get( 'circle-image' )
yourElement.constructor === CircleImage //if it's the named class

这假设您知道要检查的自定义元素的名称。

否则，您将必须遍历原型链：

CircleImage-> HTMLImageElement-> HTMLElement->元素->节点

如果HTMLElement仅是父亲，则它是一个内置元素。 如果HTMLElement是祖父（或祖父...），则可能是扩展的内置元素。

更新

如果您使用命名类，则还可以检索其名称：

elem.constructor.name