Custom Elements Everywhere

Handling data

React passes all data to Custom Elements in the form of HTML attributes. For primitive data this is fine, but the system breaks down when passing rich data, like objects or arrays. In these instances you end up with stringified values like some-attr="[object Object]" which can't actually be used.

Handling events

Because React implements its own synthetic event system, it cannot listen for DOM events coming from Custom Elements without the use of a workaround. Developers will need to reference their Custom Elements using a ref and manually attach event listeners with addEventListener. This makes working with Custom Elements cumbersome.

Experimental

The @experimental release of React features full support for Custom Elements.

Handling data

React@experimental, as of July 2022, uses a runtime heuristic to determine if it should pass data to Custom Elements as either properties or attributes. If a property is already defined on the element instance, it will use properties, otherwise it will fallback to attributes.

Handling events

React@experimental, as of July 2022, will register an event listener on any custom element when binding a function to a property whose name begins with on. It supports lowercase, camelCase, kebab-case, CAPScase, and PascalCase events.

Handling data

By default, Vue passes all data to Custom Elements as attributes. However, Vue also provides syntax to instruct its bindings to use properties instead. To bind to a Custom Element property use :foo.prop="bar".

Handling events

Vue can listen to native DOM events dispatched from Custom Elements. Its declarative event bindings only support lowercase and kebab case events. To listen for any events named with capital letters you must write imperative code.

Handling data

Angular's default binding syntax will always set properties on an element. This works well for rich data, like objects and arrays, and also works well for primitive values so long as the Custom Element author has mapped any exposed attributes to corresponding properties.

Angular also provides binding syntax specifically for setting an attribute, if a developer would prefer to communicate with an element that way.

Handling events

Angular components can listen to native DOM events dispatched from Custom Elements. It supports all styles of events (lowercase, camelCase, kebab-case, etc).

Handling data

Svelte uses a heuristic to determine whether to pass data as properties or attributes — if the property is defined on the element instance, a property is used, otherwise it will fall back to attributes.

Handling events

Svelte can listen to native DOM events dispatched from Custom Elements. It supports all styles of events (lowercase, camelCase, kebab-case, etc).

Handling data

AngularJS can declaratively pass data to attributes using ng-attr, or to properties using ng-prop.

Handling events

AngularJS can declaritively listen to native DOM events by using ng-on. It supports all styles of events (lowercase, camelCase, kebab-case, etc) by prefixing uppercase characters with an underscore (_).

Handling data

Preact uses a runtime heuristic to determine if it should pass data to Custom Elements as either properties or attributes. If a property is already defined on the element instance, Preact will use properties, otherwise it will fallback to attributes. The exception to this rule is when it tries to pass rich data, like objects or arrays. In those instances it will always use a property.

Handling events

Preact can listen to native DOM events dispatched from Custom Elements. It uses a heuristic to convert JSX event binding syntax into event names. It supports lowercase, camelCase, kebab-case, CAPScase, and PascalCase events.

Handling data

Skate lets you use a variety of different rendering engines (Preact, React, lit-html). Most Skate apps these days use Preact, so Skate + Preact should pass data primarily using properties, and only fall back to attributes if a property is not defined.

Handling events

Skate's declarative event handling is defined by the rendering engine used. If you're using Skate + Preact then it will support events with lowercase and kebab-case names, but not camelCase, PascalCase, or CAPScase events (e.g. 'URLchanged').

Handling data

Polymer will always attempt to pass data to an element using properties. To explicitly set an attribute, Polymer provides additional syntax in the form of the $= annotation.

Handling events

Polymer supports listening to DOM events using the on-* attribute syntax. It does not support arbitrarily capitalized event names (camelCase, CAPSCase, PascalCase, etc.). This is because Polymer reads the event name directly from the HTML attribute, and the HTML parser will always lowercase attribute names.

You can read more about this issue and why we test it in the FAQ.

Handling data

Hyperapp will pass data to an element as properties, as long as the property is defined on the element's prototype. Otherwise it will fallback to passing data as attributes.

Handling events

Hyperapp can listen to native DOM events dispatched from Custom Elements. It supports all styles of events (lowercase, camelCase, kebab-case, etc).

Handling data

By default, Lit passes all data to Custom Elements as attributes. However, Lit also provides syntax to bind to properties instead. To bind to a Custom Element property, prefix the property name with a . as in <input .value=${value}>.

Handling events

Lit can listen to native DOM events dispatched from Custom Elements. It supports all styles of events (lowercase, camelCase, kebab-case, etc).

Handling data

By default, Riot.js passes all primitive data (strings, numbers, booleans) to Custom Elements as attributes. It passes complex data (Objects, Arrays) to Custom Elements as properties.

Handling events

Riot.js can listen to native DOM events dispatched from Custom Elements. It supports all styles of events (lowercase, camelCase, kebab-case, etc).

Handling data

Mithril performs a key in element check to determine whether to assign values as properties or attributes: if the element or any of its prototypes have a property definition for the key in question, the value will be assigned as a property.

Handling events

Mithril can listen to native DOM events dispatched from Custom Elements. It supports all styles of events (lowercase, camelCase, kebab-case, etc).

Handling data

Omi uses a runtime heuristic to determine if it should pass data to Custom Elements as either properties or attributes. If a property is already defined on the element instance, Omi will use properties, otherwise it will fallback to attributes.

Handling events

Omi can listen to native DOM events dispatched from Custom Elements. It supports all styles of events (lowercase, camelCase, kebab-case, etc).

Handling data

By default, Stencil passes all data to Custom Elements as properties.

Handling events

Stencil can listen to native DOM events dispatched from Custom Elements. It supports all styles of events (lowercase, camelCase, kebab-case, etc).

Handling data

hyperHTML will pass data to an element as properties, as long as the property is defined on the element's prototype. Otherwise it will fallback to passing data as attributes.

Handling events

hyperHTML can listen to native DOM events dispatched from Custom Elements. It supports all styles of events (lowercase, camelCase, kebab-case, etc).

Handling data

Hybrids will pass data to an element as properties, as long as the property is defined on the element's prototype. Otherwise it will fallback to passing data as attributes.

Handling events

Hybrids can listen to native DOM events dispatched from Custom Elements. It supports all styles of events (lowercase, camelCase, kebab-case, etc).

Handling data

When passing data to a custom element, LWC takes a properties-if-available approach where attributes are set by default, but properties are set when they exist. This heuristical approach involves a runtime check to see whether a property is defined, and as such, data will be passed as an attribute if the custom element has not been upgraded. It is the responsibility of the component author to handle this scenario.

Handling events

When listening for events declaratively in the template, LWC supports neither arbitrarily capitalized event names (camelCase, CAPSCase, PascalCase, etc.) nor kebab-cased names. To listen for events named in such formats, use addEventListener() imperatively.

Handling data

DIO uses a runtime heuristic to determine if it should pass data to Custom Elements as either properties or attributes. If a property is already defined on the element instance, DIO will use properties, otherwise it will fallback to attributes. The exception to this rule is when it tries to pass rich data, like objects or arrays. In those instances it will always use a property.

Handling events

DIO can listen to native DOM events dispatched from Custom Elements. However, it uses a heuristic to convert JSX event binding syntax into event names, and always lowercases the events. For example onFooUpdated={handleFoo} tells DIO to listen for an event called 'fooupdated'. This means DIO can support events with lowercase and kebab-case names, but not camelCase, PascalCase, or CAPScase events (e.g. 'URLchanged').

Handling data

Surplus passes data to an element via properties unless the indicated field is known to be available only as an attribute (aria-*, some SVG attributes).

Handling events

By default, event handlers are registered in Surplus by setting the node.on... DOM properties: <div onclick={...}></div>. For custom events, which don't have such properties, Surplus uses surplus-mixin-on: <div fn={on('my-custom-event', ...)}></div>.

Handling data

Dojo will pass data as attributes only when the data is a type of string, otherwise it is set as a property.

Handling events

Dojo can listen to native DOM events dispatched from Custom Elements. However the event names must be prefixed with on, so a Custom Event of camelEvent would be oncamelEvent. Other than that, Dojo supports all kinds of event names.

Handling data

Solid passes all non-JSX expression data as attributes. JSX expressions default to attributes unless they are booleans, applied to a custom element, or indicated with prop: namespace.

Handling events

By default, typical "on_____" event handlers are registered in Solid using <div onClick={...}></div>. However, it always lowercases the event names and does automatic event delegation for input and mouse events.

For custom events with non-standard names, Solid uses its "on" binding: <div on:my-custom-event={...}></div>.