Определение настраиваемого встроенного элемента без атрибута is =

Question

В моем проекте Chessly.github.io я использую Настраиваемые встроенные элементы IMG для определения шахматных фигур SVG:

Вопрос: Как отличить обычное IMG от настроенного IMG?

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

Это создает шахматную фигуру , но не устанавливает атрибут is=

Теперь я сам явно установил атрибут is=, но так как этот атрибут ничего не делает и может быть установлен на любое значение (я использую is в качестве наблюдаемого атрибута в моем коде пользовательского элемента), это не надежный способ различать элементы IMGиз настраиваемых элементов IMG при ходьбе по DOM.

Если я продвигаю пешку (замените img src)

<img is=white-pawn/>

на element.setAttribute("is","white-queen")

Как я могу определить, что фигура изначально была белой пешкой?
Она по-прежнему остается белой пешкой в ​​реестре пользовательских элементов.

Я что-то пропускаю?

Упрощенный код (сбазовая форма SVG) в JSFiddle: 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 является дедушкой (или дедушкой ...), это, вероятно, расширенный встроенный элемент.

update

Если вы используете именованныйкласс вы также можете получить его имя:

elem.constructor.name