FocusVisiblePolyfillMixin.js

/**
 * This is mixin function is designed to be applied to a class that inherits
 * from HTMLElement. It makes it easy for a custom element to coordinate with
 * the :focus-visible polyfill.
 *
 * @param {Function} SuperClass The base class implementation to decorate with
 * implementation that coordinates with the :focus-visible polyfill
 */
export function FocusVisiblePolyfillMixin(SuperClass) {
  var coordinateWithPolyfill = function(instance) {
    // If there is no shadow root, there is no need to coordinate with the
    // polyfill. If we already coordinated with the polyfill, we can skip
    // subsequent invokcations:
    if (
      instance.shadowRoot == null ||
      instance.hasAttribute('data-js-focus-visible')
    ) {
      return;
    }

    // The polyfill might already be loaded. If so, we can apply it to the
    // shadow root immediately:
    if (self.applyFocusVisiblePolyfill) {
      self.applyFocusVisiblePolyfill(instance.shadowRoot);
    } else {
      // Otherwise, wait for the polyfill to be loaded lazily. It might never
      // be loaded, but if it is then we can apply it to the shadow root at
      // the appropriate time by waiting for the ready event:
      self.addEventListener(
        'focus-visible-polyfill-ready',
        function() {
          self.applyFocusVisiblePolyfill(instance.shadowRoot);
        },
        { once: true }
      );
    }
  };

  // IE11 doesn't natively support custom elements or JavaScript class syntax
  // The mixin implementation assumes that the user will take the appropriate
  // steps to support both:
  return class extends SuperClass {
    // Attempt to coordinate with the polyfill when connected to the document:
    connectedCallback() {
      super.connectedCallback && super.connectedCallback();
      coordinateWithPolyfill(this);
    }
  };
}