Include

Includes let you pull content from another file into your page.

<quiet-include src="/assets/examples/include.html"></quiet-include>

Examples Jump to heading #

Default content Jump to heading #

You can provide default content inside the include, which will be shown until the request completes. This is useful to show a loading state while the include file is fetched.

<quiet-include src="/assets/examples/include.html">
  Loading content…
</quiet-include>

Allowing scripts Jump to heading #

Scripts included in the fetched HTML will not be executed by default. If you trust the content, you can use the allow-scripts attribute to allow them to run.

<quiet-include allow-scripts src="/assets/examples/include-scripts.html"></quiet-include>

Handling events Jump to heading #

When an include file is successfully rendered, the quiet-included event will be emitted. When things go wrong, there are two possible events that signal an error.

If the HTTP request completes but the response is outside of the acceptable 200 range, the quiet-http-error event will be emitted. If the HTTP request fails due to a network error, CORS restriction, or similar, the quiet-network-error event will be emitted.

<quiet-include src="/assets/examples/include.html" id="include__events"></quiet-include>

<script>
  const include = document.getElementById('include__events');

  include.addEventListener('quiet-included', () => {
    //
    // The include file has rendered
    //
  });

  include.addEventListener('quiet-http-error', event => {
    //
    // The request completed, but the HTTP code was outside of 
    // the 200 range. You can inspect event.detail.status to
    // see which HTTP code was provided.
    //
  });

  include.addEventListener('quiet-network-error', event => {
    //
    // The request could not be completed. You can inspect 
    // event.detail.error to see the response error.
    //
  });
</script>

API Jump to heading #

Importing Jump to heading #

The autoloader is the recommended way to import components but, if you prefer to do it manually, the following code snippets will be helpful.

import 'https://cdn.jsdelivr.net/npm/@quietui/quiet@1.0.0/dist/components/include/include.js';

import '@quietui/quiet/dist/components/include/include.js';

Properties Jump to heading #

Include has the following properties that can be set with corresponding attributes. In many cases, the attribute's name is the same as the property's name. If an attribute is different, it will be displayed after the property. Learn more about attributes and properties

Events Jump to heading #

Include dispatches the following custom events. You can listen to them the same way was native events. Learn more about custom events