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> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<style> <style>
body { @font-face {
background: #fafafa; 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> </style>
</head> </head>
<body> <body>

View File

@ -152,6 +152,6 @@ export class PendorClock extends LitElement {
} }
render() { 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>`;
} }
} }