Proposal to Validate the "name" of parentElement in createIsolatedElement

[1natsu172]

Hello,

I am now using your excellent project (WXT) to replace my 7-year maintained chrome extension to Web Extension.

Main Issue

What do you think about strictly validating the name of the parentElement in the createIsolatedElement function that calls attachShadow?

My background

I wasn't aware of the rule that names must be in kebab-case, and it cost me half a day. (The browser logs didn't help, and I was at a loss.)

console error of browser(Chromium)

The content script "content" crashed on startup! DOMException: Failed to execute 'attachShadow' on 'Element': This element does not support attachShadow

After carefully comparing my project with the example template, reading the attachShadow reference, and checking the WHATWG spec sheet, I finally found a hint about the constraints of PotentialCustomElementName.

It was only after I understood the issue that I noticed the kebab-case comment in JSDoc! (because it wasn’t a type error)

Therefore...

According to the spec sheet that PotentialCustomElementName includes more complex constraints than just kebab-case. I found a validation library that seems usable:

is-potential-custom-element-name

I considered preventing this with TypeScript types, but representing complex validations seems challenging.

I believe that appropriate validation error messages in the error logs would save a lot of time in the future.

---

Sorry for the long post!

[aklinker1]

Oof, yeah, sorry that took you so long to figure out. Seems like a good library, thanks for the suggestion. I can add it, unless you'd like to contribute it?

[1natsu172]

Thanks for the quick reply. Since it’s not urgent, I’ll submit a Pull-request. I’ll see you later!

[aklinker1]

Released in WXT v0.18.0