@greenwood/plugin-polyfills

A Greenwood plugin adding support for Web Component related polyfills like Custom Elements and Shadow DOM.

Usage no npm install needed!

<script type="module">
  import greenwoodPluginPolyfills from 'https://cdn.skypack.dev/@greenwood/plugin-polyfills';
</script>

README

@greenwood/plugin-polyfills

Overview

A Greenwood plugin adding support for Web Component related polyfills for browsers that need support for part of the Web Component spec like Custom Elements and Shadow DOM. It uses feature detection to determine what polyfills are actually needed based on the user's browser, to ensure only the minimum extra code is loaded. If you are using Lit@2, it also loads the needed polyfill-support.js file.

As of right now, you will likely need this plugin to load additional polyfills if you want to support these browser(s):

  • Internet Explorer <= 11
  • Mobile Browsers

See Greenwood's browser support and evergreen build docs for more information on how Greenwood handles browser support out of the box. Or visit caniuse.com to look up specific support for specific browsers.

For more information and complete docs about Greenwood, please visit the Greenwood website.

Installation

You can use your favorite JavaScript package manager to install this package. This package assumes you already have @greenwood/cli installed.

examples:

# npm
npm install @greenwood/plugin-polyfills --save-dev

# yarn
yarn add @greenwood/plugin-polyfills --dev

Usage

Use this plugin in your greenwood.config.js.

import { greenwoodPluginPolyfills } from '@greenwood/plugin-polyfills';

export default {
  ...

  plugins: [
    ...greenwoodPluginPolyfills() // notice the spread ... !
  ]
}

Now when your project builds for production, you will see a bundles/ directory in your output directory, as well as a file called webcomponents-loader.js, as well as a <script> tag for that file in the <head> of your index.html files. When a page is loaded, the feature detection capabilities will then load the necessary polyfills to have your project work for a user's given browser.

Note: we would like to add support for differntial loading to avoid the cost of this for newer browsers.