Skip to content

Home

Jump to bottom
Ryan Johnson edited this page May 22, 2017 · 22 revisions

Welcome to the helix-ui wiki!

Installation

To begin using the custom elements, you must first ensure that the browser can load them (i.e. you have to load the polyfills). To do so, copy and paste the following to your <head>.

<!-- ES5 Adapter -->
<script src="https://b5dc4e33c725947e6dec-30cf78e7985757466f892e6ab6b08f81.ssl.cf1.rackcdn.com/custom-elements-es5-adapter.js"></script>
<!-- Polyfill Loader -->
<script src="https://b5dc4e33c725947e6dec-30cf78e7985757466f892e6ab6b08f81.ssl.cf1.rackcdn.com/webcomponents-loader.js"></script>

ES5 Adapter

The adapter provides Custom Element v1 API compatibility for legacy browsers that do not support ES6 syntax (e.g. IE11). It does so via some clever wizardry. Since v1 APIs require custom element constructors to be defined with ES6 classes, it wraps native APIs to make it compatible for ES5 browsers, but ensures that ES6 browsers still follow spec.

  • This script is expected to raise a syntax exception in browsers that do not support ES6 syntax (e.g. IE11).
  • DO NOT attempt to concatenate or compile this file to ES5.

Polyfill Loader

Using feature detection, the loader will automatically determine the minimum polyfills needed for the user's browser. The loader will add the polyfills via an additional <script> to the <head>. If the browser doesn't need any polyfills, this additional <script> will not be added.

Usage

To use these custom elements, we take advantage of the modularity of HTML Imports.

<head>
  <link rel="import" href="path/to/ui-elements.html" />
</head>

Once this loads, you may use any custom element distributed in this library.

Clone this wiki locally