How to Build a Web Component

medium-card-no-thumbnail.ts

import { LitElement, html, css } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import "./medium-card-header";
import "./medium-card-thumbnail";
import "./medium-card-body";
import "./medium-card-footer";

/**
 * A web component for generic link preview cards
 * @property header - larger header to use at the top of the card
 * @property author - smaller header to use at the top of the card
 * @property body - card's body content
 * @property footer - card's footer content
 */
@customElement('medium-card-no-thumbnail')
export class MediumCardNoThumbnailElement extends LitElement {
    static override styles = css`
    :host {
        display: flex;
        flex-direction: column;
        gap: 1em;
        background-color: var(--medium-card-background-color, white);
        border: var(--medium-card-border, solid 1px lightgray);
        border-radius: var(--medium-card-border-radius, 3px);
        padding: 1em;
    }

    medium-card-header {
        --medium-header-color: var(--medium-card-header-color);
    }

    medium-card-body {
        --medium-body-color: var(--medium-card-body-color);
    }

    medium-card-footer {
        --medium-footer-color: var(--medium-card-footer-color);
    }
    `;

    @property()
    header = '';

    @property()
    subheader = '';

    @property()
    body = '';

    @property()
    footer = '';

    override render() {

        return html`
            <medium-card-header .header="${this.header}" .subheader="${this.subheader}"></medium-card-header>
            <medium-card-body .body="${this.body}"></medium-card-body>
            <medium-card-footer .footer="${this.footer}"></medium-card-footer>
        `;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'medium-card-no-thumbnail': MediumCardNoThumbnailElement;
    }
}