Support for Scope Elements

[say25]

Stencil version:

 @stencil/[email protected]

I'm submitting a:

[ ] bug report
[x] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:

Currently custom elements can conflict when multiple WebComponents have custom elements with the same name on the page.

Expected behavior:

• Support for something like Scoped Elements

Steps to reproduce:

• Create a Stencil Component that has a custom element with the name hello-world-component that renders "Hello World"
• Create another Stencil Component that has a custom element with the name hello-world-component that renders "Hello World 2"
• Include both on the same page and see a conflict in behavior as only one can be registered.

Other information:

• An attempt to fix this with a prefix pattern was tried in feat(compiler) - Component Namespacing #843
• This was brought back up in feat(cli): Add ability to specify component generation config parameters #2427

[johnjenkins]

not saying this isn't valid, however if you need to do this now there are ways:

1. with the dist bundle: import { defineCustomElements } from '@yourcomponent/libraryname/dist/loader'; ... defineCustomElements(window, { transformTagName: tagName => `unique-prefix-${tagName}` })
2. with with dist-custom-elements bundle, after importing and when defining you can use https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define

The gotcha with these methods is that stencil doesn't replace tag names within a components' internal jsx. For that you can do something like:

const InnerComponent = `inner-component${suffix}`;
return (
    <Host>
        <InnerComponent />
    </Host>
)```

[splitinfinities]

Hey there, thank you for the patience getting back to you! This idea is interesting for sure. If there are alternatives, please share the. If you want to see something like this in the Stencil code please 👍 !

[mayerraphael]

Wanted to bump this. Since October 2023 the first browser tests are getting green:

https://wpt.fyi/results/custom-elements/scoped-registry?label=experimental&label=master&aligned

[raveenita]

Hi @splitinfinities
Can we work in this via open source?
Our project have this necessities and workarounds in my opinion doen'st worth it if we can make a difference

[christian-bromann]

@raveenita yes, we would love any contributions to this. I am happy to support when any technical question arise. Mind providing some insights in how you would like to implement this?

[fcano-ut]

I was thinking what it would take for Stencyl to be compatible with scoped custom elements polyfill

When calling the attachShadow function, we should pass a registry option that might be passed down to that function like this:

const registry = new CustomElementRegistry();

defineCustomElements(registry);

I believe it would be as simple as that, but I might be totally wrong. I'm missing in the code the part where we avoid calling defineCustomElement again if the element is already called. If such a code exists, it should also need to be changed somehow 🤔 There's also code related to supporting Shadow DOM polyfills, but the custom element registry polyfill is not supporting those polyfills. So these two features might not work together, so that's something else that might cause complexity 🤔

Anyway, that was just a little "what if" experiment. From what I can see, the Scoped Custom Element feature is still a WIP proposal, so I understand if Stencyl doesn't want to support that yet. We discussed forking Stencyl (or using patch-packages to override parts of the code), but we decided to wait a while and see if the proposal can move forward soon... Hope it does! 🤞

[johnjenkins]

I'm missing in the code the part where we avoid calling defineCustomElement again if the element is already called.

@fcano-ut it depends on the output being generated...

For the dist / lazy loader output the proxy components (the skeleton elements that wait for connectedCallback before fetching / wiring in the 'real' class) define themselves here

For the custom-element output the functions are created (via AST) so they can be bundled with each component module in-turn here