使用Bootstrap为ShadowDOM自定义元素设置样式失效求助

问题描述 #

尝试通过ShadowDOM创建自定义导航栏元素，计划用Bootstrap简化样式设置。已通过NPM安装Bootstrap，在style.scss中导入Bootstrap后将组件应用到自定义元素，但导航栏无任何样式显示，推测是Bootstrap样式无法穿透ShadowDOM导致，项目使用Webpack打包。

相关文件代码 #

style.scss

@import 'bootstrap/scss/bootstrap';
$bg : rgb(192, 253, 255);
body {
    background-color: $bg;
}

navbar.js

class NavBar extends HTMLElement {
    constructor() {
        super();
        this.shadowDOM = this.attachShadow({
            mode: 'open'
        });
    }

    connectedCallback() {
        this.render();
    }

    render() {
        this.shadowRoot.innerHTML = `
        <nav class="navbar navbar-expand-lg bg-body-tertiary">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">Navbar</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="#">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Features</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Pricing</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link disabled" aria-disabled="true">Disabled</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        `;
    }

}

customElements.define("nav-bar", NavBar);

index.js

import * as bootstrap from 'bootstrap';
import css from './style/style.scss';
import './script/component/nav-bar.js';
import main from './script/view/main.js';

document.addEventListener('DOMContentLoaded', main);

问题原因 #

ShadowDOM的核心特性是样式隔离，外部全局样式（包括style.scss中导入的Bootstrap）无法穿透到自定义元素的ShadowDOM内部，导致导航栏无法获取Bootstrap样式。

解决方案 #

需要将Bootstrap样式直接注入到ShadowDOM内部，以下两种方法均可实现：

方法1：在ShadowDOM内嵌入样式标签 #

修改navbar.js，导入Bootstrap样式后，在ShadowDOM的HTML中添加<style>标签注入样式：

// navbar.js
import bootstrapStyles from '../../style/style.scss'; // 根据实际文件路径调整

class NavBar extends HTMLElement {
    constructor() {
        super();
        this.shadowDOM = this.attachShadow({ mode: 'open' });
    }

    connectedCallback() {
        this.render();
    }

    render() {
        this.shadowRoot.innerHTML = `
        <style>${bootstrapStyles}</style>
        <nav class="navbar navbar-expand-lg bg-body-tertiary">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">Navbar</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="#">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Features</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Pricing</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link disabled" aria-disabled="true">Disabled</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        `;
    }
}

customElements.define("nav-bar", NavBar);

方法2：使用adoptedStylesheets API（推荐） #

这是现代浏览器支持的更高效的样式注入方式，直接将样式表关联到ShadowDOM：

// navbar.js
import bootstrapStyles from '../../style/style.scss';

class NavBar extends HTMLElement {
    constructor() {
        super();
        this.shadowDOM = this.attachShadow({ mode: 'open' });
        // 创建样式表并注入
        const styleSheet = new CSSStyleSheet();
        styleSheet.replaceSync(bootstrapStyles);
        this.shadowDOM.adoptedStylesheets = [styleSheet];
    }

    connectedCallback() {
        this.render();
    }

    render() {
        this.shadowRoot.innerHTML = `
        <nav class="navbar navbar-expand-lg bg-body-tertiary">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">Navbar</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="#">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Features</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Pricing</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link disabled" aria-disabled="true">Disabled</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        `;
    }
}

customElements.define("nav-bar", NavBar);

优化建议 #

• 若只想加载导航栏相关样式而非全部Bootstrap，可以在SCSS中按需导入模块，减少打包体积：

  // style.scss
  @import 'bootstrap/scss/functions';
  @import 'bootstrap/scss/variables';
  @import 'bootstrap/scss/mixins';
  @import 'bootstrap/scss/navbar';
  @import 'bootstrap/scss/nav';
  @import 'bootstrap/scss/collapse';
  $bg : rgb(192, 253, 255);
  body {
      background-color: $bg;
  }
  

• 确保Webpack配置正确处理SCSS文件，需安装并配置css-loader、sass-loader、style-loader（或mini-css-extract-plugin）。

内容的提问来源于stack exchange，提问作者Gusti Putu