<fx-include>

Description

<fx-include> lazily loads markup from a local template or external HTML source into its own light DOM immediately or when a configured event occurs.

Inclusion can be immediate or be triggered by an event. It can be ‘one-time’ or reloadable. Either inline templates and external sources are supported.

Motivations to use <fx-include> are:

  • splitting large pages into pieces for ease of authoring and modular organisation
  • reducing runtime load with large pages by loading on demand

Attributes

NameDescriptionDefault
eventthe event to listen for to trigger inclusionclick
immediatewhen attribute is present the content will be loaded immediately at load timefalse
reloadwhen attribute is present inclusion will be retriggered by each event occurrencesfalse
replacereplaces the fx-include itself with the loaded content - reload will not apply any morefalse
selectoroptional CSS selector to apply to included source-
srcexternal html source to be included - if not given a template element must exist-
targetthe target element to listen on for configured event-

Events

NameDescription
include-donedispatched when inclusion has happend
errorwhen no source is given, the loading failed or selector couldn’t be applied

Examples