如何在 shadowRoot Web Components 中插入 scss

如何解决如何在 shadowRoot Web Components 中插入 scss

是否有一种简单的方法可以将我的 scss 文件插入到我的 Update-Module -Name Az.KeyVault -Force 中？ 目的是封装这个特定的样式，只对这个组件有效。

我正在使用 template.innerHTML

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

我试图将 "parcel-bundler": "^1.12.4" 放在模板的 innerHTML 中，但没有任何结果。

这是我的组件

<link rel="stylesheet" href="../scss/animeCardStyle.scss">

我的 package.json

// 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