From 88fc676678216ee18681e8f7944542e388ff98ee Mon Sep 17 00:00:00 2001 From: Andreas Date: Wed, 27 Feb 2019 09:36:16 +0100 Subject: [PATCH 1/5] Update README.md added reference to webreflection polyfills --- README.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/README.md b/README.md index 519c38b..14582e0 100644 --- a/README.md +++ b/README.md @@ -375,6 +375,11 @@ The semi-official [webcomponents/custom-elements] polyfill is what GitHub uses, and it provides a bunch of workarounds for the spec rules involving class constructors and the `new` keyword. You should use it, too! +Unfortunately the custom element polyfill provided by `@webcomponents` does not support extended built-in custom elements, has this [known limitations](https://github.com/webcomponents/custom-elements#known-bugs-and-limitations) and [**is slow**](https://github.com/webcomponents/custom-elements#customelementspolyfillwrapflushcallback). + +The most bullet proof and battle tested polyfills I found are provided by @WebReflection: +- [document-register-element](https://github.com/WebReflection/document-register-element) (supports V1 despites it's name) has [fantastic browser support](https://github.com/WebReflection/document-register-element#tested-on) and a [public test page](http://webreflection.github.io/document-register-element/test/), please note the [`constructor` caveat](https://github.com/WebReflection/document-register-element#v1-caveat). +- [built-in-element](https://github.com/ungap/custom-elements-builtin) again fantastic browser support and [live test page](https://ungap.github.io/custom-elements-builtin/test/es5/), please note the [`constructor` caveat](https://github.com/ungap/custom-elements-builtin#constructor-caveat). ## Further reading * [Custom Elements v1: Reusable Web Components (Google)](https://developers.google.com/web/fundamentals/web-components/customelements) is a great introduction to custom elements. From e6821b2cf592cd7d380cd8a307f40b0183478693 Mon Sep 17 00:00:00 2001 From: Andreas Deuschlinger Date: Wed, 27 Feb 2019 21:31:53 +0100 Subject: [PATCH 2/5] feat: reword webcomponents polyfill caveat note --- README.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 14582e0..1a81851 100644 --- a/README.md +++ b/README.md @@ -375,7 +375,10 @@ The semi-official [webcomponents/custom-elements] polyfill is what GitHub uses, and it provides a bunch of workarounds for the spec rules involving class constructors and the `new` keyword. You should use it, too! -Unfortunately the custom element polyfill provided by `@webcomponents` does not support extended built-in custom elements, has this [known limitations](https://github.com/webcomponents/custom-elements#known-bugs-and-limitations) and [**is slow**](https://github.com/webcomponents/custom-elements#customelementspolyfillwrapflushcallback). +**Please note:** +- that extended built-in custom elements aren't supported, +- [known limitations](https://github.com/webcomponents/custom-elements#known-bugs-and-limitations) +- and [you may encounter slowness](https://github.com/webcomponents/custom-elements#customelementspolyfillwrapflushcallback). The most bullet proof and battle tested polyfills I found are provided by @WebReflection: - [document-register-element](https://github.com/WebReflection/document-register-element) (supports V1 despites it's name) has [fantastic browser support](https://github.com/WebReflection/document-register-element#tested-on) and a [public test page](http://webreflection.github.io/document-register-element/test/), please note the [`constructor` caveat](https://github.com/WebReflection/document-register-element#v1-caveat). From f4d72de9b224a0e642de41dbc40ce58524742b0a Mon Sep 17 00:00:00 2001 From: Andreas Deuschlinger Date: Thu, 28 Feb 2019 15:41:23 +0100 Subject: [PATCH 3/5] feat: reword to more diplomatic wording --- README.md | 22 +++++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 1a81851..c1dadbb 100644 --- a/README.md +++ b/README.md @@ -371,18 +371,30 @@ or `super()` calls. There are a couple of ways to pull it off: ``` ## Polyfills + +Polyfilling custom elements and Web-Components in general is a very challanging task. +Depending at your use case one of the following polyfill will suit you best, +so please make sure to know their strong and weak parts. + +**@webcomponents** + The semi-official [webcomponents/custom-elements] polyfill is what GitHub uses, and it provides a bunch of workarounds for the spec rules involving class -constructors and the `new` keyword. You should use it, too! +constructors and the `new` keyword. +You need `ShadowDOM`? Works with [webcomponents/shadydom] -**Please note:** +Be aware of: - that extended built-in custom elements aren't supported, - [known limitations](https://github.com/webcomponents/custom-elements#known-bugs-and-limitations) -- and [you may encounter slowness](https://github.com/webcomponents/custom-elements#customelementspolyfillwrapflushcallback). -The most bullet proof and battle tested polyfills I found are provided by @WebReflection: -- [document-register-element](https://github.com/WebReflection/document-register-element) (supports V1 despites it's name) has [fantastic browser support](https://github.com/WebReflection/document-register-element#tested-on) and a [public test page](http://webreflection.github.io/document-register-element/test/), please note the [`constructor` caveat](https://github.com/WebReflection/document-register-element#v1-caveat). +**@WebReflection** + +A stand-alone lightweight version of [Custom Elements V1](https://html.spec.whatwg.org/multipage/scripting.html#custom-elements) +based on top, and compatible with, the battle-tested [Custom Elements V0](http://w3c.github.io/webcomponents/spec/custom/), +already used in production with projects such as [Google AMP HTML ⚡](https://github.com/ampproject/amphtml#amp-html-) and others. +- [WebReflection/document-register-element] (supports V1 despites it's name) has [fantastic browser support](https://github.com/WebReflection/document-register-element#tested-on) and a [public test page](http://webreflection.github.io/document-register-element/test/), please note the [`constructor` caveat](https://github.com/WebReflection/document-register-element#v1-caveat). - [built-in-element](https://github.com/ungap/custom-elements-builtin) again fantastic browser support and [live test page](https://ungap.github.io/custom-elements-builtin/test/es5/), please note the [`constructor` caveat](https://github.com/ungap/custom-elements-builtin#constructor-caveat). +- You need `ShadowDOM`? Works with [WebReflection/attachshadow](https://github.com/WebReflection/attachshadow) ## Further reading * [Custom Elements v1: Reusable Web Components (Google)](https://developers.google.com/web/fundamentals/web-components/customelements) is a great introduction to custom elements. From 80bf746e885a0266a13ec12708ee349f7384fc6d Mon Sep 17 00:00:00 2001 From: Andreas Deuschlinger Date: Mon, 4 Mar 2019 13:38:21 +0100 Subject: [PATCH 4/5] feat: reword fantastic to evergreen --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index c1dadbb..d1e826a 100644 --- a/README.md +++ b/README.md @@ -392,8 +392,8 @@ Be aware of: A stand-alone lightweight version of [Custom Elements V1](https://html.spec.whatwg.org/multipage/scripting.html#custom-elements) based on top, and compatible with, the battle-tested [Custom Elements V0](http://w3c.github.io/webcomponents/spec/custom/), already used in production with projects such as [Google AMP HTML ⚡](https://github.com/ampproject/amphtml#amp-html-) and others. -- [WebReflection/document-register-element] (supports V1 despites it's name) has [fantastic browser support](https://github.com/WebReflection/document-register-element#tested-on) and a [public test page](http://webreflection.github.io/document-register-element/test/), please note the [`constructor` caveat](https://github.com/WebReflection/document-register-element#v1-caveat). -- [built-in-element](https://github.com/ungap/custom-elements-builtin) again fantastic browser support and [live test page](https://ungap.github.io/custom-elements-builtin/test/es5/), please note the [`constructor` caveat](https://github.com/ungap/custom-elements-builtin#constructor-caveat). +- [WebReflection/document-register-element] (supports V1 despites it's name) has [evergreen browser support](https://github.com/WebReflection/document-register-element#tested-on) and a [public test page](http://webreflection.github.io/document-register-element/test/), please note the [`constructor` caveat](https://github.com/WebReflection/document-register-element#v1-caveat). +- [built-in-element](https://github.com/ungap/custom-elements-builtin) again evergreen browser support and [live test page](https://ungap.github.io/custom-elements-builtin/test/es5/), please note the [`constructor` caveat](https://github.com/ungap/custom-elements-builtin#constructor-caveat). - You need `ShadowDOM`? Works with [WebReflection/attachshadow](https://github.com/WebReflection/attachshadow) ## Further reading From f647490ae17d2a3e3a0e1f4c35b06790dfd72a64 Mon Sep 17 00:00:00 2001 From: Andreas Deuschlinger Date: Mon, 4 Mar 2019 13:39:52 +0100 Subject: [PATCH 5/5] feat: link built-in browser support separately --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index d1e826a..ea97a59 100644 --- a/README.md +++ b/README.md @@ -393,7 +393,7 @@ A stand-alone lightweight version of [Custom Elements V1](https://html.spec.what based on top, and compatible with, the battle-tested [Custom Elements V0](http://w3c.github.io/webcomponents/spec/custom/), already used in production with projects such as [Google AMP HTML ⚡](https://github.com/ampproject/amphtml#amp-html-) and others. - [WebReflection/document-register-element] (supports V1 despites it's name) has [evergreen browser support](https://github.com/WebReflection/document-register-element#tested-on) and a [public test page](http://webreflection.github.io/document-register-element/test/), please note the [`constructor` caveat](https://github.com/WebReflection/document-register-element#v1-caveat). -- [built-in-element](https://github.com/ungap/custom-elements-builtin) again evergreen browser support and [live test page](https://ungap.github.io/custom-elements-builtin/test/es5/), please note the [`constructor` caveat](https://github.com/ungap/custom-elements-builtin#constructor-caveat). +- [built-in-element](https://github.com/ungap/custom-elements-builtin) again [evergreen browser support](https://github.com/ungap/custom-elements-builtin#compatible-with-) and [live test page](https://ungap.github.io/custom-elements-builtin/test/es5/), please note the [`constructor` caveat](https://github.com/ungap/custom-elements-builtin#constructor-caveat). - You need `ShadowDOM`? Works with [WebReflection/attachshadow](https://github.com/WebReflection/attachshadow) ## Further reading