Component folders and assets

A component folder keeps markup beside the resources it owns:

components/
└── AudioTier/
    ├── index.html
    ├── audio-tier.css
    ├── audio-tier.mjs
    └── reference.svg

The directory name becomes the component name and index.html becomes its entry. A directory without index.html is ignored during component discovery.

Declaring assets

Assets remain explicit HTML dependencies:

<!doctype html>
<html>
<head>
  <link rel="stylesheet" href="./audio-tier.css">
  <script type="module" src="./audio-tier.mjs"></script>
</head>
<body>
  <span class="audio-tier">
    <img src="./reference.svg" alt="">
    <span sklair-text="label"></span>
  </span>
</body>
</html>

Since in most cases the source contains relative paths, and Sklair preserves the directory structure for component folders in the final site, assets should work normally. It doesn't matter though; read below.

Built namespace

When the component is used, its directory is copied to:

/_sklair/components/audiotier/

Relative references in the component's resolved head and body are rebased to that namespace. Root-relative, fragment-only, protocol-relative, and absolute URLs remain unchanged. Query strings and fragments on relative URLs are preserved.

Rewriting covers href on <link>, src and srcset on common media and embedded elements, and data on <object>. A relative resource path which escapes the component directory with .. is rejected.

Internal relative imports

The whole directory is copied with its internal structure intact. CSS url() values and JavaScript imports are not rewritten by the HTML compiler, but they continue to work when they are relative to the copied CSS or module file.

Only component folders reached by a compiled document are copied. Their assets propagate through recursive dependencies and are deduplicated by component name for the final build.