Use a Library to share Component "Library files" between components. The most typical usage is in conjunction with -src and namespace, as below:

<Library namespace="mylib" -src="./static/libraries/mylib.html" ></Library>


Libraries use their attributes to configure the Components that they load. That means their attributes are the same as the Component class attributes, except they are "applied" across all child components. This means you can configure any configuration option on Components. However, you typically only want to set namespace, and possibly mode.

  • namespace -

    • default: namespace="x"
    • The namespace prefix that goes before the component when registering on the DOM. This is the most common thing you will set on a Library, since it allows you to "namespace" or isolate the components that you load and prevent names from conflicting. For example, you can import two Libraries, each with a name="Modal" component, but by giving them separate namespaces, you can distinguish them with something like lib1-Modal and lib2-Modal, instead of x-Modal for both, which would get confusing.
  • mode

    • Override the default mode of loaded components.
    • You can use this to force a Library to have vanishing components (mode="vanish"), or have components that isolate their style (mode="shadow").
    • Note that if you are loading somebody else's component library and overriding the component modes with this attribute, it may not work correctly (or at all!), since many components may require they stay on the page after rendering for the JavaScript and other functionality to work. However, some components may work either way, allowing a lighter-weight usage with "vanish", a style-isolated version with "shadow", or an interactive, non-isolated version as default.
  • alias

    • default: (none)
    • Override the default alias of loaded components
    • This allows you to give the components a "nick-name" that you then refer to them as in your Template
    • If alias is specified while namespace left blank, the components will get an auto-generated and unique namespace based on on the full definition name of the component
    • When your templates compile, they will swap the tags for the nick-name, allowing you to have easily remembered local names for imported Library components, but the final component will have a long, unique tag name (and all that will be "baked in" to the final compiled template