Using Skylab SDK with shadow DOM

Adding styles and fonts to the shadow root

When attaching a component that uses Skylab SDK to a shadow host in an app that does not use Skylab, you must also append the Skylab stylesheet and fonts. Example:


  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 Pro';
  const sourceSansPath = 'source-sans-pro';
  const unicodeRange = 'U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215';

  const allSourceSansSizes = ['300', '300i', '400', '400i', '600', '600i', '700'];
  const allFonts = allSourceSansSizes.map(size => {
    return new FontFace(sourceSansName, `url(${skylabFontUrl}/${sourceSansPath}-${size}.woff)`, {
      style: size.includes('i') ? 'italic' : 'normal',
      weight: size.includes('i') ? size.split('i')[0] : size,
      unicodeRange,
    });
  });

  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(() => {});
  });