> **Note**: You can also define multiple scope type. For example,
> `<script src="wiles/render-scope.js" :extends="header footer section" async></script>`
> will define custom elements of: `<header-scope>`, `<footer-scope>`, and `<section-scope>`
---
2. [ ] using custom element
```html
<link rel="stylesheet" href="./windi.css">
<script src="wiles/define-scope.js" async></script>
<define-scope tag="header-navigation" extends="header">
<link as="script" href="./navbar.js">
</define-scope>
<header is="header-navigation">
<h1 :="shrinkTitle" class="text-4xl">Wiles</h1>
<button on:click="showNav" class="icon-menu"/>
<nav class="hidden">
<a href="/docs/">Documentation</a>
<a href="/demo/">Examples</a>
<a href="/elements/">Manual</a>
</nav>
</header>
Note: This feature is just to avoid repetition of linking the scoped modules
(i.e not cluttering your html file with <link as="script"> in multiple place).
[ ] using JS function
/// header-navigation.js
import { define } from "wiles/std"
import NavBar from "./navbar.js"
Note: The define() is like the rest, no different! However, this pattern has a benefit. When bundled, the browser only need to fetch one script (header-navigation.js). The downside is you can't load module conditionally (i.e load modules when scope is visible or triggered by click/hover).
[ ] explicit hydration
import query, * as by "wiles/std/query"
import links, * as link from "wiles/std/hydrate"
import NavBar from "./navbar.js"
import navbar from "./navbar.css" assert { type: "css" }
import * as Carousel from "./carousel.js"
import carousel from "./carousel.css" assert { type: "css" }
This feature is just for practical convenience. There is no technical merit except the last two.
Wiles
define("header-navigation", { extends: "header", classes: [NavBar], })
import NavBar from "./navbar.js" import navbar from "./navbar.css" assert { type: "css" }
import * as Carousel from "./carousel.js" import carousel from "./carousel.css" assert { type: "css" }
link.ESclass(by.tag("nav"), NavBar) link.CSSmodule(by.CSSclass("navbar"), navbar)
let found link.ESmodule(found = by.query("header > div.carousel"), Carousel)
links(by.id("carousel"), found ? Carousel.Simple : Carousel, carousel)