пытается заставить css применяться только к пользовательскому элементу, использующему shadow dom. Для рендеринга я использую lit-html.
Есть идеи? Или какой-то другой подход для инкапсуляции без тени?
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<script type='module' src="script.js"></script>
<title>LitComponent</title>
</head>
<body>
<lit-component></lit-component>
<p>not styled</p>
</body>
</html>
js
import { html, render } from "./node_modules/lit-html/lit-html.js";
class LitComponent extends HTMLElement {
constructor() {
super();
this.attachShadow({mode: 'open'})
}
connectedCallback() {
let style = document.createElement('style');
style.innerHTML = `
p {
font-size: 80px;
}
`
this.shadowRoot.appendChild(style);
render(this.createView(), this);
}
createView() {
return html`
<p> styled </p>
`;
}
}
customElements.define("lit-component", LitComponent);
сильный текст Я ожидаю получить«стилизованный» абзац внутри моего LitComponent, стилизованный с помощью font-size: 80px;, а простой абзац с разметкой - нет.
Но на самом деле он вообще не рендерил мой компонент при присоединении тени таким образом. Скриншот