na-lit

食用方式

先決條件

pnpm i @nanarino/stylus

這裏設置了一個辨識度比較高的字形（蒹葭楷F-港標），用來檢驗樣式是否正確注入

---
import stylus from "@nanarino/stylus?url"
import ChienChiaF from "@/assets/fonts/ChienChia-F.styl?url"
---
<html lang="zh-HK">
    <head>
        <!-- 先引入樣式套件 並標記 -->
        <link rel="stylesheet" href={stylus} data-nanarino-lit-provide />
        <link 
            rel="stylesheet"
            href={ChienChiaF}
            data-nanarino-lit-provide
            onload="document.documentElement.style.setProperty('--font-family-base', 'ChienChia-F')"
        />
        <!-- 初始化客户端 -->
        <script src="@/scripts/client/init"></script>
    </head>
    <body>
        <slot />
    </body>
</html>

套用元件

元件暫時未計劃發佈到 npm ，可以從源程式碼自订構建（ /dist/all.js或按需）放置在自己專案的 assets 或 public 目錄中，或者直接拷貝到自己的專案

分支 #prepare 安裝時觸發自動構建, 在ts的裝飾器默認開啓之前是必須的

而今可以直接從 npm 安裝

pnpm install @nanarino/lit

為了減小包體積，樣式是額外注入的

實際上這裏利用的 LitElement.prototype.styles 就是原生的 shadowRoot.adoptedStyleSheets (不可用時回退)

// import 立即宣告元件 作為副作用
import { NanarinoLitComponent } from "@nanarino/lit/dist/all.js"
// 或按需:
import { NanarinoLitComponent } from "@nanarino/lit/dist/base"

const provides = Array.from(
    document.querySelectorAll("link[data-nanarino-lit-provide]")
) as HTMLLinkElement[]

for (const css of provides
    .reduce(
        (rules: CSSRule[], link) => [...rules, ...(link.sheet?.cssRules ?? [])],
        []
    )
    .reverse()) {
    // 點解要用try 見 https://github.com/nanarino/lit/issues/1
    try {
        NanarinoLitComponent.adoptedStyle.insertRule(css.cssText)
    } catch (error) {
        console.warn(error)
    }
}

頁面中使用，如

<section>
    <na-pagination total="36"></na-pagination>
</section>

按需須要單獨宣告，如 ( import "@nanarino/lit/dist/Pagination/index.js" 以使用 <na-pagination />)

避免 FOUC

不只本套件，這對於所有元件適用

na-svg-icon:not(:defined) {
    opacity: 0;
}