我有这个组成部分：
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>
clock.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>
但这不起作用。我应该在影子根目录中的某处使用slot标签吗？什么是实现这一目标的最佳实践？
最佳答案
您可以在可在外部设置的自定义元素中公开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
请注意，Codepen演示针对非Chrome浏览器使用了Web组件polyfill，但是您可以对其进行注释，以查看它在Chrome中仍然可以正常使用。
关于javascript - Vanilla JS WebComponent的用户样式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41449150/