lwc icon indicating copy to clipboard operation
lwc copied to clipboard

Use html-element-attributes and svg-element-attributes

Open nolanlawson opened this issue 2 years ago • 0 comments

This affects attribute validation in @lwc/template-compiler, which currently surfaces as warnings.

The libraries html-element-attributes and svg-element-attributes contain mappings of valid HTML tag/attribute pairs. They each have ~70-80k weekly npm downloads and seem fairly up-to-date.

Currently we are using a vendor'ed copy of the first:

https://github.com/salesforce/lwc/blob/2ddff92f4cb7c223e63a1ad791ae6b9bf2d66a42/packages/%40lwc/template-compiler/src/parser/utils/html-element-attributes.ts#L34-L43

... and for the second, we are just assuming that all known SVG elements are good, regardless of what attributes they have:

https://github.com/salesforce/lwc/blob/dba53e754cf30e3ecad9fb150db8827d84140827/packages/%40lwc/template-compiler/src/parser/attribute.ts#L222

https://github.com/salesforce/lwc/blob/9246638da2ca6eeb95a1f3f905a058dec80215ef/packages/%40lwc/template-compiler/src/parser/constants.ts#L58-L61

Rather than maintaining our own list of valid html tag/attribute mappings (which can get out-of-date or be inaccurate), we should pool efforts with a reliable third-party package like these ones.

Unfortunately these two packages both switched to ESM recently, so we would need to solve #3017 first.

nolanlawson avatar Aug 23 '22 21:08 nolanlawson