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

Visit the Polyfills guide for more details about browser compatibility.

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.

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

HelixUI Styles
helix-ui-2.3.0/dist/css/
HelixUI Scripts
helix-ui-2.3.0/dist/js/
Web Components Polyfills
helix-ui-2.3.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/.

UNPKG is not recommended for use in a production environment.

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 

<!-- 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>