<fx-load>

Description

Loads some content into a page, open a new tab with content or replaces current browser window with content.

Content may be loaded from url or be specified inline surrounded with a template element.

If the HTML being loaded contains a fx-fore element it will be extracted from the page and used as content to be inserted.

Attributes

NameDescriptiondefault
attach-to‘_self’, ‘_blank’ or idref prefixed with ‘#’_self
awaiteventname to await from templated content-
urlURL to load content from

The await attribute

Sometimes if you load a component with fx-load and the component has some initialization to do, you might want to wait for a certain event dispatched by that component before moving on. await will make sure this event fires before the load action becomes effective.

Events

NameDescription
url-loadeddispatched after successful load of content

Examples

‘Unloading’ a section

With load you can also delete parts of the DOM and replace them with an empty element.

This is useful to reset a formerly loaded section again when you’re done with it.

<fx-load attach-to="#htmlout">
  <template><div></div></template>
</fx-load>

Examples