DocsCookbookCommunityGitHub →

Custom element naming

One of the weak parts of Custom Elements standard - is a common namespace for all custom tags registered in current runtime. So, if you developing something like widget or library, there is some danger of names collisions in a host application. Let's consider what to do in that case.

The simplest way - is conventional naming. Use library-specific prefix or postfix for element names:


You can use automatic tag names for Symbiote templates:

class Com1 extends BaseComponent {}
Com1.template = /*html*/ `<button>Component 1</button>`;

class Com2 extends BaseComponent {}
Com2.template = /*html*/ `<button>Component 2</button>`;

class MyApp extends BaseComponent {}
MyApp.template = /*html*/ `