v0.18.1

Corrections

This patch release fixes an issue with the HXElement base class so that it doesn't create HTML attributes when an instance of a custom element is constructed. (#656 via #657)

This bug surfaces with the following conditions:

1. HelixUI is being consumed within a single-page application (SPA)
   • React: confirmed
   • Vue: unconfirmed
   • Angular: unconfirmed
   • Other client-side frameworks might also be affected.
2. the SPA is being loaded in IE
   • Additional polyfills required by IE may be contributing to the conditions for the bug.
3. the SPA is mounted asynchronously using the async/promise-based HelixUI.initialize() functionality added in HelixUI v0.18.0 (see below)

new, async/promise-based initialization strategy (v0.18.0 and later):

// HelixUI initialized manually
HelixUI.initialize().then(() => {
  /* 
    SPA mounted here.

    When mounting/rendering SPA (i.e., updating the DOM) 
    the Custom Element polyfill throws errors similar to the following:

      "Failed to construct 'hx-div': The constructed element must not have any attributes"
    */
});

We're not entirely sure why this bug only pops up when using SPAs. However, we've modified HXElement behavior to ensure that attributes are not being set during instantiation, but instead set after the instance is attached to the DOM. Via manual testing this was sufficient to allow the SPA to mount without errors in IE.

Older versions of HelixUI

⚠️ This bug still has the possibility of popping up in older versions of HelixUI. However, we have not backported this patch to older versions, because we've found no way to trigger it with the old initialization strategy (see below).

<script src="path/to/custom-elements-es5-adapter.js></script>

<!--
  HelixUI.initialize() run automatically by script logic.
  Custom elements are registered when the Web Component polyfills have finished loading.

  NOTE: Due to the asynchronous nature of loading the Web Component polyfills, 
        there's no guarantee that custom element definitions will be defined before
        mounting your SPA.
-->
<script src="path/to/dist/scripts/helix.browser[.min].js"></script>

<!-- 
  SPA mounted here.
  No error thrown by polyfills when mounting/rendering SPA.
-->
<script src="path/to/your/single/page/application/bundle.js"></script>

Merged

• #657 - fix(HXElement): call ShadyCSS away from constructor
• #648 - refactor(dropdown-select): surf-1898
• #634 - refactor(checkbox): convert less styles to scss
• #647 - refactor(Choice Tile): convert Light DOM LESS to SCSS
• #631 - refactor(File): convert Light DOM LESS to SCSS