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!