Link

A link resource for attaching external link-based assets such as stylesheets or preloads.

Import

import { Link } from "@schukai/monster/source/dom/resource/link.mjs";

Source

View source code

Package

@schukai/monster

Since

1.25.0

Link represents a DOM link resource such as a stylesheet, preload or related external asset. It wraps the browser's <link> element in the shared Monster resource lifecycle.

Use it when loading behavior needs to be explicit and configurable instead of being scattered through ad-hoc DOM mutations.

Create And Connect A Link Resource

import { Link } from "@schukai/monster/source/dom/resource/link.mjs";

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

document.getElementById("link-run").addEventListener("click", () => {
    const link = new Link({
        href: "/assets/demo.css",
        rel: "stylesheet",
        document,
        query: "head",
    });

    output.textContent = JSON.stringify(
        {
            href: link.getOption("href"),
            rel: link.getOption("rel"),
            query: link.getOption("query"),
        },
        null,
        2,
    );
});

Open in playground

Exported

Link

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

string

undefined

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

crossOrigin

string

anonymous

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

boolean

disabled

href

string

undefined

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

hreflang

string

undefined

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

imagesizes

string

undefined

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

imagesrcset

string

undefined

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

integrity

string

undefined

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

media

string

undefined

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

prefetch

string

undefined

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

referrerpolicy

string

undefined

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

rel

string

undefined

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

type

string

undefined

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

sizes

string

undefined

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

nonce

string

undefined

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

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.Link}

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.