Open say25 opened 3 years ago
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>
)```
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 👍 !
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
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
Stencil version:
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:
Steps to reproduce:
hello-world-component
that renders "Hello World"hello-world-component
that renders "Hello World 2"Other information: