Element: import-element (References) | Realm

dark

Summary

web-app

custom-element

element-attr

element-state

element-flow

global-state

import-element

import-script

import-style

is-visible

is-hidden

repeat-list

trigger-event

listen-event

set-attr

set-state

set-timer

send-event

http-request

request-header

request-body

response-ok

response-fail

script

trigger-element

Comparison Operators

Mutation Operators

Data Source

Summary

web-app

custom-element

element-attr

element-state

element-flow

global-state

import-element

import-script

import-style

is-visible

is-hidden

repeat-list

trigger-event

listen-event

set-attr

set-state

set-timer

send-event

http-request

request-header

request-body

response-ok

response-fail

script

trigger-element

Comparison Operators

Mutation Operators

Data Source

This element tag is used to import a custom element from another html file (accross the web). Please note that if you want to export your custom element to the web, you must enable CORS on the server that hosts the custom element.

The HTML file should have at least a <custom-element> tag inside it.

A valid URL, relative or absolute path is allowed.

A custom name alias for the imported custom element.

Automount the imported custom element (see example below). Default is `false`.

<!-- Once imported, you can use the imported elements with original name from the document. -->
<import-element from="./relative-path/custom-element.html"></import-element>
<import-element from="/absolute-path/custom-element.html"></import-element>
<import-element
  from="https://thirdparty.domain/custom-element.html"></import-element>

<!-- Once imported, you can use the imported elements with an alias name. -->
<import-element
  from="./relative-path/custom-element.html"
  as="abc-xyz"></import-element>
<import-element
  from="/absolute-path/custom-element.html"
  as="my-element"></import-element>
<import-element
  from="https://thirdparty.domain/custom-element.html"
  as="element-from-xxx"></import-element>

<!-- These will be auto mounted, and will be replaced with the custom element name. -->
<import-element
  from="./relative-path/custom-element.html"
  automount></import-element>
<import-element from="/absolute-path/custom-element.html" automount>
  <strong>
    Can accept children if the custom element has slot children inside it.
  </strong>
</import-element>
<import-element
  from="https://thirdparty.domain/custom-dialog.html"
  automount
  can-accept-attribute="yes"
  is-open="true"></import-element>