Version: 5.x

single-spa-html

single-spa-html is a helper library for mounting raw HTML and web components as single-spa applications or parcels.

  1. npm install --save single-spa-html
  2. # or
  3. yarn add single-spa-html

Alternatively, you can use single-spa-html from a CDN as a global variable:

  1. <script src="https://cdn.jsdelivr.net/npm/single-spa-html"></script>

Note that you might want to lock down the package to a specific version. See here for how to do that.

  1. import singleSpaHtml from 'single-spa-html';
  2. const htmlLifecycles = singleSpaHtml({
  3. template: '<x-my-web-component></x-my-web-component>',
  4. })
  5. export const bootstrap = htmlLifecycles.bootstrap;
  6. export const mount = htmlLifecycles.mount;
  7. export const unmount = htmlLifecycles.unmount;

Example usage when installed via CDN:

  1. const webComponentApp = window.singleSpaHtml.default({
  2. template: props => `<x-my-web-component attr="${props.attr}"></x-my-web-component>`,
  3. })
  4. singleSpa.registerApplication({
  5. name: 'name',
  6. app: webComponentApp,
  7. activeWhen: () => true
  8. })

single-spa-html is called with an object that has the following properties:

  • template (required): An HTML string or a function that returns a string or promise that resolves a string. The function will be called with the single-spa custom props. The returned string is injected into the DOM during the single-spa mount lifecycle.
  • domElementGetter (optional): A function that is given the single-spa props and returns the dom element container into which the HTML will be injected. If omitted, a default implementation is provided that wraps the template in a <div> that is appended to document.body.

HTML / Web Components - 图1Edit this page