54 lines
1.0 KiB
JavaScript
54 lines
1.0 KiB
JavaScript
/**
|
|
* Book Description Component
|
|
* Displays formatted book description text
|
|
*/
|
|
class BookDescription extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
this.attachShadow({ mode: "open" });
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.render();
|
|
}
|
|
|
|
render() {
|
|
this.shadowRoot.innerHTML = `
|
|
<style>
|
|
:host {
|
|
display: block;
|
|
}
|
|
|
|
.description {
|
|
font-family: var(--font-family-outfit, "Outfit", sans-serif);
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
line-height: 28px;
|
|
color: var(--color-text, #1e293b);
|
|
}
|
|
|
|
::slotted(p) {
|
|
margin: 0 0 var(--spacing-md, 1rem) 0;
|
|
}
|
|
|
|
::slotted(p:last-child) {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
::slotted(.quote) {
|
|
font-style: italic;
|
|
}
|
|
|
|
::slotted(.author) {
|
|
font-weight: 400;
|
|
}
|
|
</style>
|
|
<div class="description">
|
|
<slot></slot>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
customElements.define("book-description", BookDescription);
|