Я хочу создать веб-компонент HTML, и мне нужно импортировать файл CSS, но я хочу внедрить его в мою теневую оболочку. У меня есть код, подобный приведенному ниже:
import introHTML from './Intro.html';
import introCss from './Intro.css';
class IntroWebComponent extends HTMLElement{
constructor(){
super();
this.defineClassProp();
}
defineClassProp(){
this._shadowRoot = this.attachShadow({ mode: 'open' });
this._html = introHTML
this._element = document.createElement('template');
this._element.innerHTML = this._html;
this._element.append(`<style>${introCss}</style>`)
this._shadowRoot.appendChild(this._element.content.cloneNode(true));
}
}
window.customElements.define('index-intro', IntroWebComponent);
, но 'rollup-plugin-postcss' продолжает вводить CSS в мою основную HTML-голову, и я не знаю, как это остановить