Using Skylab SDK with shadow DOM

Adding styles and fonts to the shadow root

  const shadowRoot = this.el.attachShadow({ mode: 'open' });
  shadowRoot.appendChild(myContent);

  // Load Skylab CSS

  const skylabCSS = document.createElement('link');
  skylabCSS.rel = 'stylesheet';
  skylabCSS.href = 'https://assets.avalara.io/skylab-sdk/version/build/skylab-sdk.css';
  shadowRoot.appendChild(skylabCSS);

  // Load Skylab fonts

  const skylabFontUrl = 'https://assets.avalara.io/skylab-sdk/{version}/fonts';
  const sourceSansName = 'Source Sans 3';
  const sourceSansPath = 'SourceSans3';

  const allSourceSansSizes = ['Light', 'LightItalic', 'Regular', 'Italic', 'SemiBold', 'SemiBoldItalic', 'Bold'];
  const fontWeightMap = {
    Light: '300',
    LightItalic: '300',
    Regular: '400',
    Italic: '400',
    SemiBold: '600',
    SemiBoldItalic: '600',
    Bold: '700',
  };
  const allFonts = allSourceSansSizes.map(size => {
    return new FontFace(sourceSansName, `url(${skylabFontUrl}/${sourceSansPath}-${size}.ttf)`, {
      style: size.includes('Italic') ? 'italic' : 'normal',
      weight: fontWeightMap[size] || '400',
    });
  });

  const fontIcons16 = new FontFace('s-icons', `url(${skylabFontUrl}/s-icons.woff)`, {
    style: 'normal',
    weight: '400',
  });

  const fontIcons24 = new FontFace('s-icons-24', `url(${skylabFontUrl}/s-icons-24.woff)`, {
    style: 'normal',
    weight: '400',
  });

  allFonts.push(fontIcons16, fontIcons24);

  allFonts.forEach(font => {
    font
      .load()
      .then(loadedFace => {
        document.fonts.add(loadedFace);
      })
      .catch(() => {});
  });