Element: import-script (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 JavaScript file, it similar with <script type="module"> tag, but it’s only allowed to be used inside <custom-element> tag.

The script tag then will be added in the <head> tag, and will be executed once the Custom element is defined.

The JavaScript file's URL

<custom-element name="my-element">
  <import-script
    from="https://cdn.jsdelivr.net/npm/[email protected]"></import-script>
  <element-flow>
    <trigger-event click="ShowConfettiBtn">
      <script type="module/realm">
        confetti({
          particleCount: 100,
          spread: 70,
          origin: { y: 0.6 }
        });
      </script>
    </trigger-event>
  </element-flow>
  <template>
    <button ref="ShowConfettiBtn">Yay! 🎉</button>
  </template>
</custom-element>

<my-element></my-element>