Browsersupport - Githubissues

jurekbarth commented 6 years ago

Test all common browsers and polyfills

tiagomapmarques commented 6 years ago

With the code as is (i.e. no polyfills), only Safari, Chrome and Opera support our current implementation of BioElement. I've confirmed that IE11, Edge and Firefox fail without polyfills.

This means that, if we ignore Shadow-DOM, the browser support section of https://www.webcomponents.org/ is up-to-date.

~~Can someone else please have a look which polyfills are actually needed?~~

timomayer commented 6 years ago

think the best and most tested polyfill is this one: https://github.com/WebComponents/webcomponentsjs we shuld go with the "loader" variant so we only load the polyfills in browsers which need them.

SheepFromHeaven commented 6 years ago

We also need a ShadowDom Polyfill

tiagomapmarques commented 6 years ago

Results of the investigation are the following:

All the polyfills needed are already included in the @webcomponents/webcomponentsjs package;
- ShadowDOM works seamlessly when using the polyfills
- Scoped CSS works as well, but without pseudo-selectors like :host

AFAIK @biotope/build and biotope-boilerplate do not include a way of not bundling scripts (into scripts.all.min.js or scripts.head.min.js), so they are incompatible with the polyfills package (both v1 and v2) unless a hack like this is made:

<head>
<script>
(function() {
  e = document.createElement('script');e.src ='resources/js/vendor/custom-elements-es5-adapter.js';
  document.head.appendChild(e);
  f = document.createElement('script');f.src ='resources/js/vendor/webcomponents-loader.js';
  document.head.appendChild(f);
})()
</script>

Here is a working example of BioElement being used in an external Js project using babel/webpack, with the @webcomponents/webcomponentsjs package as polyfills: https://github.com/tiagomapmarques/js-boilerplate/tree/feature/add-web-components-example WARNING: before running, please update BioElement (lib/index.js - line 19) with the following: [EDIT: removed example code here]

The example shows that ES5+BioElement is possible on IE11, Safari and Evergreen browsers (with webcomponentsjs as polyfills).

My conclusion is that this issue is resolved by simply adding the aforementioned hack in the document head (and a few mods in the projectConfig.js) but #25 is a completely separate issue, related only to biotope-build and not BioElement.

timomayer commented 6 years ago

Hi @tiagomapmarques thats not the case. there is a possibility to add scripts to biotope projects which are not concated into scripts.all.min.js. only the files which are included between this comments:

in file biotope-boilerplate/src/layouts/includes/htmlhead.scripts.hbs are concatinated. you can refrence other files in that file just outside the comments and it will not concat this files

timomayer commented 6 years ago

is this solved when you do not add the files into the "concatination comments"?

biotope / experimental-biotope-components

Browsersupport #11