From e99ab0894b3c532ad0d846c7f94fee944e781af8 Mon Sep 17 00:00:00 2001 From: Andreas Deuschlinger Date: Fri, 26 Oct 2018 08:17:02 +0200 Subject: [PATCH] updated readme --- README.md | 45 ++++++++++++++++++++++++++++++++++----------- 1 file changed, 34 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 02816736dc..16460904f6 100644 --- a/README.md +++ b/README.md @@ -5,8 +5,13 @@ Preview can be found here: https://axa-ch.github.io/patterns-library/ This is the core pattern library used for AXA Switzerland. It's based on Web-Components. -Web-Components are natively supported in modern browser. This repo contains also polyfills for those -less "cool" browsers out there. Support is: +Web-Components are natively supported in modern browsers. +This repo contains also polyfills for those less "cool" browsers out there. Support is: + +* [custom-elementsv1](https://caniuse.com/#feat=custom-elementsv1) +* [shadowdomv1](https://caniuse.com/#feat=shadowdomv1) +* [HTML template](https://caniuse.com/#feat=template) +* [HTML imports](https://caniuse.com/#feat=imports) * ie 11 (Polyfill for template, html import, shadow dom and custom element) * EDGE (Polyfill for html import, shadow dom and custom element) @@ -16,7 +21,13 @@ less "cool" browsers out there. Support is: REF: https://github.com/webcomponents/webcomponentsjs -The main goal here to have components that are reusable with every frontend technology. It doesn't matter if you are using angular or React, you can always import the Components from the pattern library. +**Important:** +We don't use polyfills provided from https://github.com/webcomponents/webcomponentsjs, because they aren't feature complete. +Instead we use the battle-tested polyfills by WebReflection: +- https://www.npmjs.com/package/document-register-element +- https://www.npmjs.com/package/built-in-element + +The main goal here is to have components that are reusable with every frontend technology. It doesn't matter if you are using angular or React, you can always import the Components from the patterns library. *At the moment, we only use Living Standard Custom Element, therefore it will run natively on Safari and Chrome on mobile and desktop.* @@ -43,20 +54,25 @@ If a component has dependencies to other components, you will have to add them a To use the webcomponents with older browsers, import the polyfills which are available under: ```js -import '@webcomponents/webcomponentsjs/bundles/webcomponents-ce'; +// better to load this only if it's needed +import 'document-register-element/'; // ES2015 +// load this for browsers which support customElements without builtin (webkit) +import 'built-in-element'; ``` or: ```html - + ``` -A quick overview what they do: -`webcomponents-ce.js` includes Custom-Elements polyfill of the 4 parts of the webcomponents specs. -`es6-polyfills.js` are all the polyfills needed for ie11. -Alternatively to `webcomponents-ce.js`, `webcomponents-lite.js` loads all and`webcomponents-loader.js` loads the polyfills that is needed asynchronously via AJAX. - If you are using your own framework, be aware to convert the webcponents to a component for your framework (simple components like `m-button` does not need to be converted): Do you love **angular >= 2**? Here a helpfull link for you: https://www.sitepen.com/blog/2017/09/14/using-web-components-with-angular/ @@ -85,7 +101,14 @@ Here an example on how to use the component button and typo in your project. The - +