Skip to content

Browserify-compatible web-component polyfills, courtesy of Polymer

Notifications You must be signed in to change notification settings

juliangruber/polyfill-webcomponents

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

47 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

polyfill-webcomponents

Browserify compatible Web Components Polyfills

This is the [Polymer Platform]((https://github.com/Polymer/polymer) in a browserify compatible package. This is not the full Polymer framework, just the platform, which provides the polyfills for next-generation web technology.

Polyfills will be regularly updated to latest development versions.

Installation

> npm install --save polyfill-webcomponents

Use as a peer dependency

It is recommended to set polyfill-webcomponents as a Peer Dependency for anything except your top-level application.

Because polyfill-webcomponents necessarily modifies your global state, and will only load once, it doesn't make sense to have multiple copies bundled in your app. Peer dependencies allows a child modules to use the version loaded in the parent module.

Add this to your package.json:

  "peerDependencies": {
    "polyfill-webcomponents": "*"
  },

Usage

Use in-browser only with browserify.

// polyfill your browser environment
var Platform = require('polyfill-webcomponents')
// Platform is polymer's proprietary namespace, contains some helpers

Simply require polyfill-webcomponents anywhere your code needs webcomponent support.

You can safely require polyfill-webcomponents multiple times, it will only add the polyfills once.

Documentation

See the documentation specifically for the Platform on the Polymer website.

Features

Due to nature of the browser, proper encapsulation of these polyfills is not possible. This modifies your entire browser environment with polyfills for:

  • CustomElements
  • ShadowDOM
  • HTMLTemplates
  • Model Driven Views
  • WeakMap
  • PointerEvents
  • PointerGestures
  • HTMLImports

Go to polymer-project.org for API details.

Browser Compatibility

This is alpha software. Support/performance is a bit fickle in everything but Chrome & Canary, and you may even experience dramatic differences between versions of Chrome. For best experience you'll want to at least enable:

  • chrome://flags/#enable-experimental-web-platform-features
  • chrome://flags/#enable-html-imports
  • chrome://flags/#enable-javascript-harmony

But remember to also test for degraded performance with these features off.

These polyfills work (with caveats) in Evergreen Browsers.

  • Chrome
  • Canary
  • Chrome Android
  • Firefox
  • Safari 6+
  • Mobile Safari
  • Internet Explorer 10+

Do the web a favour, insist on only supporting Evergreen Browsers in your upcoming project.

See Polymer's documentation for more information.

TODO

No Fork

If this package does not work as expected, let's work together to fix it; the last thing we need is more random 3rd parties scattering unofficial Polymer pieces around npm.

About

Browserify-compatible web-component polyfills, courtesy of Polymer

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 99.8%
  • Shell 0.2%