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?