javascript - 如何在 shadowRoot Web 组件中插入 scss

Question

有没有一种简单的方法可以将我的 scss 文件插入到我的template.innerHTML. 目的是封装此特定样式以仅对该组件有效。

我在用"parcel-bundler": "^1.12.4"

如何在不影响整个应用程序的情况下导入 scss + 仅将其插入到我的 Web 组件模板中？

我试图放置<link rel="stylesheet" href="../scss/animeCardStyle.scss">在我的模板的 innerHTML 中，但没有任何结果。

这是我的组件

// how do i include sass in template
import animeCardStyle from '../scss/animeCardStyle.scss';

const template = document.createElement('template');
template.innerHTML = `
    <div class="anime-card">
    <div>
        <img />
        <h3></h3>
        <div class="info">
            <p>
                <slot name="anime-description" >
            </p>
        </div>
    </div>
    </div>
`;

class AnimeCard extends HTMLElement{
    constructor(){
        super() // calling the constuctor of HTMLElement

        // ShadowDom
            //An important aspect of web components is encapsulation
            //being able to keep the markup structure, style, and behavior hidden and separate
            //from other code on the page so that different parts do not clash, and the code can 
            //be kept nice and clean. The Shadow DOM API is a key part of this, providing a way to 
            //attach a hidden separated DOM to an element

        this.attachShadow({mode:'open'})
        this.shadowRoot.appendChild(template.content.cloneNode(true))
        this.shadowRoot.querySelector('h3').innerHTML = this.getAttribute('anime-title')
        this.shadowRoot.querySelector('img').src = this.getAttribute('avatar')
        this.shadowRoot.querySelector('img').width = "300"

    }

    // Custom element lifecycle methods

    // constructor() : Called when an instance of the element is created or upgraded
    // connectedCallback() : Called everytime an element is inserted in DOM -> useful for setting event listeners
    // disconnectedCallback() : Called everytime an element is removed from DOM
    // attributeChangedCallback(attrName,oldValue,newValue) : Called when an attribute is added, removed, upgraded or replaced.
    something() {
        
      }

    // connectedCallback() {
    //     this.shadowRoot.querySelector('#elem').addEventListener('click', () => this.something());
    //   }
    
    //   disconnectedCallback() {
    //     this.shadowRoot.querySelector('#elem').removeEventListener();
    //   }
}
window.customElements.define('anime-card',AnimeCard)


const animeCard = async () => {

    let response = await fetch('https://kitsu.io/api/edge/anime').then(function (res) {
        return res.json()
    });

    let animes = response
    console.log(animes.data)


    let template = "";

    for (let index = 0; index < animes.data.length; index++) {
        let anime = animes.data[index];

        let anime_img = '';
        if (anime.attributes.coverImage != null) {
            anime_img = anime.attributes.coverImage.original;
        }
        let anime_title = '';
        if (anime.attributes.coverImage != null) {
            anime_title = anime.attributes.canonicalTitle;
        }
        let anime_description = '';
        if (anime.attributes.coverImage != null) {
            anime_description = anime.attributes.description;
        }

        template += `
                <anime-card avatar="${anime_img}" anime-title="${anime_title}">
                    <div slot="anime-description">${anime_description}</div>
                </anime-card>           
            `

    }

    return template
}

export default animeCard

我的 package.json

{
  "name": "mypackage",
  "version": "1.0.0",
  "description": "This is my package",
  "main": "index.js",
  "scripts": {
    "dev": "npm run clean && parcel public/index.html --out-dir development -p 3000",
    "build": "rimraf ./dist && parcel build public/*.html --out-dir dist --public-url ./",
    "clean": "rimraf ./development && rimraf ./.cache"
  },
  "author": "me",
  "license": "UNLICENSED",
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/plugin-transform-runtime": "^7.12.15",
    "@babel/runtime-corejs2": "^7.12.13",
    "@babel/runtime-corejs3": "^7.12.13",
    "parcel-bundler": "^1.12.4",
    "sass": "^1.32.7",
    "sass-to-string": "^1.4.2"
  }
}

标签： javascriptsassweb-componentshadow-domparceljs