Identifying a Customized Built-In Element without an is= attribute

寵の児 提交于 2019-12-13 01:29:04

问题


In my Chessly.github.io project I use Customized Built-In IMG Elements to define SVG chesspieces:

Question: How can I distinguish a regular IMG from a customized IMG?

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

This creates a chesspiece, but does not set the is= attribute

I now explicitly set the is= attribute myself, but since this attribute does nothing and can be set to any value (I use is as an observed attribute in my Custom Element code) it is not a solid way to distinguish IMG elements from Customized IMG elements when walking the DOM.

If I promote a pawn (replace the img src)

<img is=white-pawn/>

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

How can I determine the piece originally was the white pawn?
It still is a white-pawn in the Custom Elements registry.

Am I overlooking something?

Simplified code (with basic SVG shape) in JSFiddle: https://jsfiddle.net/dannye/k0va2j76/

Update: Code (based on correct answer below)

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

note! This does NOT catch Autonomous Custom Elements!

maybe better:

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

回答1:


I think adding explicitly the is attribute is the best solution for now.

Else you'll have to deal with the class reference. In your case:

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

This supposes that you know the name of the custom elements you want to check.

Else you'll have to go through the protoype chain:

CircleImage --> HTMLImageElement --> HTMLElement --> Element --> Node

If HTMLElement is only the father, it's a built-in element. If HTMLElement is the grandfather (or grand-grand...), it's probably an extended build-in element.

update

If you use a named class you can also retrieve its name:

elem.constructor.name


来源:https://stackoverflow.com/questions/56665530/identifying-a-customized-built-in-element-without-an-is-attribute

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!