'Define a web component inside another web component without polluting global namespace

Suppose I want to use a web component that use 10 web component internally, and if the component define it globally, Internals will pollute my global component namespace and I can't use their name for another components.

Is there any way to use a web component inside another web component without defining it via customElements.define()?

javascript web-component

Solution 1:^[1]

scoped custom element registry is not supported yet but you can use prefix name until the time it is supported for example if your component name is x-foo you can name your component x-foo-title, x-foo-image, etc. for example in jb-input developer use sub web component like this:

<jb-input>
    <jb-input-inbox-element slot="end-section">
        <div>after</div>
    </jb-input-inbox-element>
    <jb-input-inbox-element slot="start-section">
        <div>before</div>
    </jb-input-inbox-element>
</jb-input>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	javad bat

'Define a web component inside another web component without polluting global namespace

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]