The hyphen requirement (e.g., my-component) is part of the HTML specification to prevent naming conflicts with existing and future built-in HTML elements. Since native HTML elements never contain hyphens, custom elements with hyphens are guaranteed to be distinguishable. This also helps parsers and developers instantly recognize custom elements. Valid examples: user-card, data-table, tool-tip.

Open mode (mode: 'open') allows external JavaScript to access the shadow root via element.shadowRoot. This is useful for debugging, testing, and when you need programmatic access. Closed mode (mode: 'closed') denies external access, providing stronger encapsulation. For most use cases, open mode is recommended — it's more developer-friendly and the security difference is minimal since determined users can still access closed roots via monkey-patching.

Observed attributes are a list of attribute names (defined via static get observedAttributes()) that the browser monitors for changes. When any of these attributes are added, removed, or modified on the element, the attributeChangedCallback(name, oldValue, newValue) lifecycle method is triggered automatically. This is essential for making your component reactive to HTML attribute changes, enabling declarative configuration like <my-counter count="10">.

There are four lifecycle callbacks:
• connectedCallback() — called when the element is inserted into the DOM. Ideal for setup, fetching data, or starting timers.
• disconnectedCallback() — called when the element is removed from the DOM. Use for cleanup (removing event listeners, clearing timers).
• attributeChangedCallback(name, oldVal, newVal) — called when an observed attribute changes. Use for reactive updates.
• adoptedCallback() — called when the element is moved to a new document (rare, used with iframes).

Yes, absolutely! Web Components are framework-agnostic by design. You can use them seamlessly inside React, Vue, Angular, Svelte, or any other framework. Since custom elements are native HTML elements, frameworks treat them like any other DOM element. React has full support for custom elements since React 19, and for older versions you may need to use refs for complex property passing. Vue has excellent built-in support for custom elements.

Web Components are supported in all modern browsers: Chrome (67+), Firefox (63+), Safari (12.1+), and Edge (79+). This covers over 95% of global users. For legacy browsers like Internet Explorer, polyfills are available (e.g., @webcomponents/webcomponentsjs). The core APIs — Custom Elements, Shadow DOM, and HTML Templates — are now part of the stable web platform.

Shadow DOM creates an encapsulated DOM tree inside your element — styles are scoped, and external CSS cannot affect the component's internals (and vice versa). This prevents style leaks and conflicts. Light DOM (no Shadow DOM) means the component's content is rendered directly into the main document DOM tree. This offers less isolation but allows global styles to penetrate, which can be desirable for theming or when you want the component to inherit the page's look and feel.