'How to distinguish between DOM attribute and DOM property when building Virtual DOM implementation?

I am building my own Virtual DOM implementation. So, for building a patch function, I need to differentiate between attribute (e.g. data-*, title, href, etc.) and property (value, checked, etc.)

The additional complexity lies due to the presence of custom elements (Web Components) which may have random properties. My question is how do I always correctly determine if the incoming key/value should be applied as attribute or property?



Solution 1:[1]

You can get list of data-* by dataset property. so you can subset between nodeElement.attributes and nodeElement.dataset.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 MORÈ