Question 1

How do custom elements work with React?

Accepted Answer

Custom elements can be used in React as regular HTML elements, but React's synthetic event system may not handle custom events from elements well. The guide notes compatibility but doesn't provide deep integration details, so additional testing is needed.

Question 2

Are custom elements or React components better for my project?

Accepted Answer

Custom elements are native standards offering framework-agnostic reuse, while React components provide a rich ecosystem with state management. Choose custom elements for standardization and longevity, or React for rapid development within its ecosystem.

Question 3

How to handle state in custom elements?

Accepted Answer

State is typically managed via attributes and properties using attributeChangedCallback for reactivity. The README's CounterElement example shows basic state handling with observed attributes, but complex state requires manual implementation.

Question 4

Do custom elements work in Safari and older browsers?

Accepted Answer

Native support is limited: Safari lacks extended built-in element support, and older browsers need polyfills. The guide recommends polyfills like webcomponents/custom-elements for cross-browser compatibility, but this adds overhead.

Question 5

How to create a custom element that extends a native button?

Accepted Answer

Use window.customElements.define('fancy-button', FancyButton, {extends: 'button'}) and instantiate with <button is="fancy-button">, as explained in the customized built-in elements section, but note Safari requires a polyfill.

Question 6

What are the performance costs of using custom elements?

Accepted Answer

Native custom elements are performant as they leverage DOM APIs, but polyfills can introduce JavaScript overhead. The guide advises progressive enhancement to ensure fallbacks, but performance testing is essential for polyfilled environments.

All about HTML Custom Elements

What is All about HTML Custom Elements?

Overview

Use Cases

Best For

Related Projects

Found a gem we're missing?

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions