我有这个组件:
index.html
<html>
<head>
<title></title>
<meta charset="UTF-8">
<script src="clock.js"></script>
<style>
clock-digital div {
background-color: green;
}
</style>
</head>
<body>
<clock-digital></clock-digital>
</body>
</html>
时钟.js
customElements.define('clock-digital', class extends HTMLElement {
constructor() {
super();
var shadowRoot = this.attachShadow({
mode: 'open'
});
this._clockID = setInterval(function () {
var currentdate = new Date();
var hours = ( (currentdate.getHours() < 10) ? '0' : '') + currentdate.getHours();
var minutes = ( (currentdate.getMinutes() < 10) ? '0' : '') + currentdate.getMinutes();
var seconds = ( (currentdate.getSeconds() < 10) ? '0' : '') + currentdate.getSeconds();
shadowRoot.innerHTML = `
<style>
div {
display: inline-block;
width: 65px;
text-align: center;
background-color: whitesmoke;
font-style: italic;
border: 1px solid lightgray;
border-radius: 3px;
box-shadow: 2px 2px 3px;
}
</style>
<div>
${hours}:${minutes}:${seconds}
</div>`;
}, 500);
}
});
我希望组件的用户可以在时钟上定义他的样式。我试过:
<style>
clock-digital div {
background-color: green;
}
</style>
但它不起作用。我应该在 shadow root 的某个地方使用插槽标签吗？实现该目标的最佳做法是什么？
最佳答案
你可以公开 CSS properties在可以在外部设置的自定义元素中。
在您的示例中，您的元素可以定义 --clock-background-color，它设置 div 的背景颜色:
shadowRoot.innerHTML =
`<style>
div {
background-color: var(--clock-background-color, whitesmoke);
/* ... */
}
</style>
<div>
${hours}:${minutes}:${seconds}
</div>`;
然后，您的元素的用户可以通过以下方式将背景颜色更改为绿色:
<style>
clock-digital {
--clock-background-color: green;
}
</style>
<clock-digital></clock-digital>
请注意，Codepen 演示使用了适用于非 Chrome 浏览器的 Web Components polyfill，但您可以将其注释掉以查看它在 Chrome 中仍然正常工作。
关于javascript - vanilla JS webcomponent 的用户样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41449150/