Are Custom Elements the Right Choice?

A major benefit of using custom elements for web components is encapsulation. This applies to both CSS styles and functionality (HTML and JavaScript). Encapsualation can aso have some down sides. Here are some questions to help you decide if they are right for you.

Functionality

Is this component adding any functionality that is not available as a standard HTML element?

Yes. Using a custom element will make it easier to reuse that functionality in multiple locations.

No. It is better to use a standard HTML element directly if it meets your needs. Encapsulating it inside of a custom element creates work to pass values back and forth between your custom element and the standard HTML element. Don't re-invent the wheel.

CSS Styling

Who is using this component?

Used by a 3rd party. Using a custom element will prevent the 3rd party styling from changing the styling of your component

Used by you If you control both the component and the application, it is much easier to prevent or resolve styling conflicts. If you are having conflicts with 3rd party components in your application, consider wrapping them in custom elements to isolate their styles. This will also prevent 3rd party to 3rd party conflicts.

How much does the consumer need to be able to style your component?

Completely. it needs to match their application style exactly. This can be a difficult area for custom elements because they are designed to isolate styles. Using ::part can help give consumers direct access to the portions of the component they need to style.

A little bit. The consumer may need to change a color or font but the majority of the styling cannot be altered. This is a good case to use a custom element with a few CSS variables to pass through the style values.

Not at all. Using a custom element can prevent changes to your styling.