web-components

Web components gotcha's

Custom Elements

The name of a custom element must contain a dash (-). So <x-tags>, <my-element>, and <my-awesome-app> are all valid names, while and <foo_bar> are not. This requirement is so the HTML parser can distinguish custom elements from regular elements. It also ensures forward compatibility when new tags are added to HTML.
You can’t register the same tag more than once. Attempting to do so will throw a DOMException. Once you’ve told the browser about a new tag, that’s it. No take backs.
Custom elements cannot be self-closing because HTML only allows a few elements to be self-closing. Always write a closing tag (<app-drawer></app-drawer>).
Set a :host display style (e.g. block, inline-block, flex) unless you prefer the default of inline.
4.1 Custom elements are display: inline by default, so setting their width or height will have no effect. This often comes as a surprise to developers and may cause issues related to laying out the page. Unless you prefer an inline display, you should always set a default display value.
You can't rely on disconnectedCallback() for your element being removed from the DOM in all circumstances. For example, disconnectedCallback() will never be called if the user closes the tab.