# Compatibility

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:

• amber-visual: CSS Grid Layout
• amber-components: ES2015, Web Components v1

# Browsers

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.

# Vue

You can seamlessly use Web Components in Vue template syntax.

# React

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.

# Lit-HTML

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