Frequently Asked Questions

What are Web Components?

Web Components are a set of W3C-standard APIs that enable developers to create custom HTML tags that encapsulate markup, style, and behavior in a framework-agnostic fashion.

HTML Imports

Defines the mechanisms needed to reuse HTML documents in other HTML documents.

This technology was abandoned in favor of ES6 Modules in mid-2018.

HTML Templates

Allows the creation of document fragments that go unrendered on page load, but can be instantiated later.

Shadow DOM

Provides the ability to define encapsulated HTML and CSS.

Custom Elements

Provides the foundation for creating "custom" HTML elements.

Which Browsers are Supported?

HelixUI is built to be compatible with the following browsers:

Google Chrome: latest
Mozilla Firefox: latest
Internet Explorer: 11
Microsoft Edge: latest
Apple Safari: latest

Which Frameworks are Supported?

HelixUI is built on W3C-standard APIs, so compatibility with client-side frameworks should be pretty good. However, HelixUI is built to ensure maximum compatibility with the following client-side frameworks:

Vanilla HTML: 5+
Angular: 2+
AngularJS: 1.7
React: 16+
VueJS: 2.5+

Can I install HelixUI if I don't use NPM?

While NPM is the preferred strategy, there are alternative means to consume HelixUI.

Please explore alternative installation methods below.

Download

UNPKG

Download ready-to-use assets that can be dropped into any HTML project.

tgz

helix-ui-2.4.0-rc.0.tgz

HelixUI + Polyfills

The same assets mentioned in the Getting Started guide are also available in the download.

HelixUI Styles: helix-ui-2.4.0-rc.0/dist/css/
HelixUI Scripts: helix-ui-2.4.0-rc.0/dist/js/
Web Components Polyfills: helix-ui-2.4.0-rc.0/node_modules/@webcomponents/webcomponentsjs/

UNPKG is a great way to experiment with HelixUI. You can browse available assets at https://unpkg.com/helix-ui/.

HelixUI Styles: https://unpkg.com/helix-ui/dist/css/
HelixUI Scripts: https://unpkg.com/helix-ui/dist/js/
Web Components Polyfills: https://unpkg.com/helix-ui/node_modules/@webcomponents/webcomponentsjs/

Why are there so many JavaScript files?

In the dist/js/ directory of the helix-ui NPM package, you'll find several different JavaScript assets. Here is an overview of their intended use and how they differ.

	Development	Production
UMD for Legacy Browsers ECMAScript 5 / ES5	`helix-ui.js`	`helix-ui.min.js`
CommonJS for Legacy Bundlers ECMAScript 5 / ES5	`helix-ui.cjs.js`	—
ESM for Modern Bundlers ECMAScript 2015+ / ES6+	`helix-ui.esm.js`	—
ESM for Modern Browsers ECMAScript 2015+ / ES6+	`helix-ui.module.js`	`helix-ui.module.min.js`

UMD for Legacy Browsers

ECMAScript 5 / ES5 Syntax
pkg.unpkg (https://unpkg.com/helix-ui)
Intended to be used by legacy browsers that don't support ES Modules.

<!-- ignored by modern browsers -->
<script nomodule src="path/to/helix-ui[.min].js"></script>

CommonJS for Legacy Bundlers

ECMAScript 5 / ES5 Syntax
pkg.main
Intended for use with legacy bundlers like browserify and webpack v1.

var HelixUI = require('helix-ui');

// ...

ESM for Modern Bundlers

ECMAScript 5 / ES5 Syntax
pkg.module
Intended for use with modern bundlers like webpack v2+ or Rollup.

import HelixUI from 'helix-ui';

// ...

ESM for Modern Browsers

ECMAScript 2015+ / ES6+ Syntax
Intended to be used by modern browsers that support ES Modules.

<!-- ignored by legacy browsers -->
<script type="module" src="path/to/helix-ui.module[.min].js"></script>