Stylesheet

A link resource specialized for loading external stylesheets.

Import

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

Source

View source code

Package

@schukai/monster

Since

1.25.0

Stylesheet is the stylesheet-focused specialization of the link resource. It exists so stylesheet loading can use the same resource lifecycle as other dynamically managed assets.

Use it when CSS is loaded conditionally or grouped under a resource manager instead of being hard-coded into the page shell.

Configure A Stylesheet Resource

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

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

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

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

Open in playground

Exported

Stylesheet

Derived from

Link

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

Option

Type

Default

Description

rel

string

stylesheet

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

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

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

Static methods

[instanceSymbol]()2.1.0

Returns

{symbol}

This method is called by the instanceof operator.

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.