Script

A script resource for inserting external JavaScript files into the document.

Import

import { Script } from "@schukai/monster/source/dom/resource/script.mjs";

Source

View source code

Package

@schukai/monster

Since

1.25.0

Script models an external JavaScript asset as a DOM resource. It wraps the <script> element and exposes its loading attributes through a documented option surface.

That is useful when scripts are loaded dynamically, conditionally or as part of a resource orchestration flow.

Create And Connect A Script Resource

import { Script } from "@schukai/monster/source/dom/resource/script.mjs";

const output = document.getElementById("script-output");

document.getElementById("script-run").addEventListener("click", () => {
    const script = new Script({
        src: "/assets/demo.js",
        type: "module",
        defer: true,
        document,
        query: "body",
    });

    output.textContent = JSON.stringify(
        {
            src: script.getOption("src"),
            type: script.getOption("type"),
            defer: script.getOption("defer"),
        },
        null,
        2,
    );
});

Open in playground

Exported

Script

Derived from

Resource

Options

The Options listed in this section are defined directly within the class. This class is derived from several parent classes. Therefore, it inherits Options from these parent classes. If you cannot find a specific Options in this list, we recommend consulting the documentation of the Resource.

Option

Type

Default

Description

async

boolean

true

s://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-async}

crossOrigin

string

anonymous

er.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-crossorigin}

defer

boolean

false

://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer}

integrity

string

undefined

{@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-integrity}

nomodule

boolean

false

{@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-nomodule}

nonce

string

undefined

{@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-nonce}

referrerpolicy

string

undefined

{@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-referrerpolicy}

type

string

text/javascript

{@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-type}

Properties

The Properties listed in this section are defined directly within the class. This class is derived from several parent classes. Therefore, it inherits Properties from these parent classes. If you cannot find a specific Properties in this list, we recommend consulting the documentation of the Resource.

Methods

The methods listed in this section are defined directly within the class. This class is derived from several parent classes. Therefore, it inherits methods from these parent classes. If you cannot find a specific method in this list, we recommend consulting the documentation of the Resource.

Behavioral methods

create()

Returns

{Monster.DOM.Resource.Script}

Static methods

[instanceSymbol]()2.1.0

Returns

{symbol}

This method is called by the instanceof operator.

getURLAttribute()

Returns

{string}

Events

This component does not fire any public events. It may fire events that are inherited from its parent classes.

The current width of the area is too small to display the content correctly.