This feature is just for practical convenience. There is no technical merit except the last two.

Warning WebKit doesn't support is="..." attribute

[ ] using special attribute when installing render-scope


<link rel="stylesheet" href="./windi.css">
<script src="wiles/render-scope.js" :extends="header" async></script>

Wiles

> **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"

define("header-navigation", { extends: "header", classes: [NavBar], })

```html
<link rel="stylesheet" href="./windi.css">
<script src="./header-navigation.js" async></script>

<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: 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" }

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)


> **Note**: Yup! This is the traditional approach found in Alpine.js, petite-vue, and Stimulus which query the element then bind/hydrate them.

DrSensor / nusa

Override element #25

Wiles