使用 javascript 在 lit-element 中實現引導程序

Question

我嘗試在我的 lit-element 項目中實現引導樣式。 但我有點掙扎，不知道如何在其中實施引導程序。 我所有的網站導航鏈接都在 index.js 中，我嘗試將引導程序中的類添加到我的 lit-element 項目中，但它沒有按我的意願工作，我在互聯網上找不到幫助解決方案。 你可以幫幫我嗎？

index.js

export const routes = [
    {
        route: "/",
        name: "home",
        pattern: "",
    },
    {
        route: "/example",
        name: "example",
        pattern: "example",
        element: html`<example-page />`,
    },
    {
        route: "/replacement_table",
        name: "replacement_table",
        pattern: "replacement_table",
        element: html`<replacement-table />`,
    },
    {
        route: "/replacement_form",
        name: "replacement_form",
        pattern: "replacement_form",
        element: html`<replacement-form .showMode=${false}/>`,
    },
    {
        route: "/login",
        name: "login",
        pattern: "login",
        element: html`<login-page />`
    },
    {
        route: "/suggestions_table",
        name: "suggestions-table",
        pattern: "suggestions_table",
        element: html`<suggestions-table />`,
    },
    {
        route: "/study",
        name: "study",
        pattern: "study",
        element: html`<new-study />`,
    },
    {
        route: "/approve_adjustment_form",
        name: "approve-adjustment-form",
        pattern: "approve_adjustment_form",
        element: html`<approve-adjustment-form />`,
    },
    {
        route: "/excel",
        name: "excel",
        pattern: "excel",
        element: html`<excel-info />`,
    }
    //PATTERN NEEDS TO BE THE SAME AS ROUTE!!!!!!
];

這是我想要從引導主題示例中復制的樣式。

<div class="container">
    <header class="d-flex justify-content-center py-3">
      <ul class="nav nav-pills">
        <li class="nav-item"><a href="#" class="nav-link active" aria-current="page">Home</a></li>
        <li class="nav-item"><a href="#" class="nav-link">Features</a></li>
        <li class="nav-item"><a href="#" class="nav-link">Pricing</a></li>
        <li class="nav-item"><a href="#" class="nav-link">FAQs</a></li>
        <li class="nav-item"><a href="#" class="nav-link">About</a></li>
      </ul>
    </header>
  </div>

這是我的 lit-element js 代碼

    render() {
        return html`
            <div>
                <div>
                    <dev-tools />
                </div>
                <div class="container">
                    ${routes.map(item => {
        return html`<app-link href="${item.route}">${item.name}</app-link>`;
    })}
                    <app-main active-route=${this.route}>
                        ${routes.map(item => {
        if (item.element) {
            return html`<div route="${item.name}">${item.element}</div>`;
        } else {
            return html`<h1 route="${item.name}">${item.name}</h1>`;
        }
    })}
                        <h1 route="not-found">ERROR404 PAGE NOT FOUND</h1>
                    </app-main>
                </div>
            </div>
        `;
    }

Answer 1

您需要通過設置 renderroot 來渲染到 light-dom 而不是 shadow-dom。

見： https://lit.dev/docs/components/shadow-dom/

但請注意：通常不建議渲染到子 DOM 而不是 shadow DOM。 您的元素將無法訪問 DOM 或樣式范圍，並且無法將元素組合到其內部 DOM 中。

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/> <script type="module"> import { LitElement, html, css } from "https://unpkg.com/lit-element/lit-element.js?module"; class MyBadge extends LitElement { createRenderRoot() { return this; } static get properties() { return { title: { type: String, reflect: true }, }; } render() { return html` <h1>Example heading <span class="badge bg-secondary">${this.title}</span></h1> `; } } customElements.define("my-badge", MyBadge); </script> <my-badge title="SOME TEXT"></my-badge>