[Feature Request]: support custom elements that have no definition

[e111077]

Which browser are you using?

Chrome

Is your feature request related to a problem? Please describe.

Often times I have a web component and it isn't rendering, and often the root of the problem is that it is not defined (no call to customElements.define).

Describe the solution you'd like

Show elements with hyphens (-) in their name that are not defined in the custom element registry and note that they are not yet defined.

Additional context

Many times undefined custom elements are intentional e.g. lazy loading upgrade, SSR partial hydration, or just using placeholder component names like in Angular.

[Matsuuu]

Great idea! Currently I do checks on elements with hyphens, and then check if they are present in the encosing window's customElements object.

It would be beneficial in a dev environment to list out elements not yet upgraded/defined as you said, and I'll definitely look into implementing this as a feature, maybe even into the next release.

Many times undefined custom elements are intentional e.g. lazy loading upgrade, SSR partial hydration, or just using placeholder component names like in Angular.

If you have example projects/sites that implement these practices, please do share them

[Matsuuu]

Heya Elliot,

Would this be something along the lines of feedback you'd like for undefined elements?

[Matsuuu]

With a little less disrupting shade of red

[e111077]

That looks super great!

Though looking at my original suggestion, maybe this is the wrong way to go about it. Like it's useful to know which are undefined, but what about the SSR use case where it's technically an HTMLUndefinedElement but it has a shadow root and styles, it's just not hydrated yet? It's not necessarily bad that it's undefined and I feel like red + warning text suggests that it's something that needs to be fixed (though green + red for color blindness is not good anyway).

Perhaps a different color like grey (what I think of like <button disabled>) with maybe an asterisk or something? The problem is that I wouldn't know how to tell users asterisk means undefined.

[e111077]

Maybe this is feature bloat, but what about you don't show HTMLUnknownElements by default but instead have a checkbox that says "show undefined custom elements" and they'll show up with gray text + asterisk (or whatever signifier. Question mark? Interrobang? Emoji?).

I think this'll be a bit nicer for people debugging WCs in SSR apps or Angular or Flutter Web apps that all use hyphenated tag names, but they may "overpower" the things you're actually trying to debug?

Anyway, not much you can do with them interaction-wise in WC devtools

[Matsuuu]

Yeah I think putting this feature behind a flag would be ideal as there's multiple cases where you might and might not want to have this on/off.

Moving to gray text + asterisk for now and going to be implementing the toggle menu later on as it needs some UI work

[Matsuuu]

Do you happen to have any example of a page where I could run into ssr elements that are not yet hydrated? Or a repository.

I'm in quite a lack of test cases here myself so would appriciate all the test cases I can get.

I'll leave the undefined elements into the inspector in the master branch for now and start development on the menu soon-ish

[Matsuuu]

There's now features for showing unregistered components and also displaying an icon when they are hydrated. I'll be closing this now