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.
|CSS Grid Layout||CanIUse?||N/A||N/A|
|ES 2015||Compat-table||N/A||Babel / Typescript|
|Web Components v1||CanIUse?||N/A|
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
SyntheticEventssystem 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.