Make the clock's <DIV> accessible by outside CSS. This will allow the font to be configurable without a rebuild.

This commit is contained in:
Elf M. Sternberg 2023-10-07 14:36:37 -07:00
parent f7349ac854
commit bf73427be7
2 changed files with 14 additions and 4 deletions

View File

@ -3,9 +3,19 @@
<head>
<meta charset="utf-8">
<style>
body {
background: #fafafa;
}
@font-face {
font-family: 'Bitwise';
font-style: normal;
font-weight: 400;
src: url("https://pendorwright.com/fonts/Bitwise/Bitwise.woff2") format("woff2"),
url("https://pendorwright.com/fonts/Bitwise/Bitwise.ttf") format("truetype");
}
body {
background: #fafafa;
}
pendor-clock::clock {
font-family: Bitwise;
}
</style>
</head>
<body>

View File

@ -152,6 +152,6 @@ export class PendorClock extends LitElement {
}
render() {
return html`<div id="clock">${this.tick(this.clock.value)}</div>`;
return html`<div id="clock" part="clock">${this.tick(this.clock.value)}</div>`;
}
}