Expressed Dependencies

Checklist » Loading

✓ Expressed Dependencies

Does the component import or otherwise load all of its own dependencies?

A web component often needs to pull in other web components or resources such as images. To the extent possible, a component should try to declare its dependencies in such a way that those resources are automatically pulled in, rather than requiring the page author to do so.

Dependencies on other web components

Example: A foo-element defined in FooElement.js has a template that makes use of bar-element defined in a peer file, BarElement.js. In FooElement.js, the component can declare this dependency:

import './BarElement.js';

This ensures that the file BarElement.js will be bundled or loaded by anyone using FooElement.js.

If the dependency BarElement.js is coming from another package (e.g., an npm package), then that inter-project dependency should be appropriately declared as well (in the case of npm, in package.json).

For performance reasons, a component may want to defer the loading of another component that it needs. In such cases, you can import the module for the other component with a dynamic import:

class MyElement extends HTMLElement {
  async function loadBar() {
    const { default: BarElement } = await import('./BarElement.js');
    const barElement = new BarElement();
    this.shadowRoot.appendChild(barElement);
  }
}

Dependencies on images and other resources

At the time of this writing (June 2019), there is currently no standard way for the JavaScript module for a component to indicate that it depends on an external resource that is not another JavaScript module. Bundling tools like webpack do allow you to import resources like images and stylesheets, but such import declarations are not standard, and cannot be directly understood by the browser.

For the time being, when developing components intended for use by a broad audience, it may be best to inline small images as inline SVG elements or a Data URL.