Both the Visual and Components packages of the Amber Design System take advantages of specifics browser features, you may want to check them first before use it in you projects:


The library targets the evergreen (Chrome, Firefox, Safari, Edge) browsers out of the box, you may need some polyfills and/or transpiling especially for IE11.

Feature Browser support Polyfill Transpile?
CSS Grid Layout CanIUse? N/A N/A
ES 2015 Compat-table N/A Babel / Typescript
Web Components v1 CanIUse? Google N/A

JS frameworks/libraries

As the amber-components are based on the Web Components v1 specification they are compatible with almost every Javascript framework or library. You can find an exhaustive list on Custom Elements Everywhere website.

Following you will find a set of small examples demonstrating the amber-tabs component interacting with properties and events on differents JS frameworks/libraries.


You can seamlessly use Web Components in Vue template syntax.


You can easily pass data down from a React component to a Web Component attribute, but it's a bit more tricky with the events. Since React use a proprietary SyntheticEvents model the listeners need to be attached directly to the node reference.

Side note: in a next release of React, the SyntheticEvents system will be removed in favor of native events bubbling. This will drastically simplify the integration between React & Web components and as consequence also the code above.


Being the templating library for the amber-components module itself, you can obviously use Lit-HTML to manipulate Web Components.

Last Updated: 2/14/2019, 2:32:47 PM