"Resumable" Web Components

custom-card-styles.css

:host {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.content {
  display: flex;
  gap: 20px;
}

.actions {
  display: flex;
  justify-content: end;
  gap: 10px;
}

custom-card.definition.js

class CustomCard extends HTMLEement {
   get dismissable() { return this.hasAttribute('dismissable'); }
   set dismissable(dismissable) { this.toggleAttribute('dismissable', dimissable); }
  
   get new() { retrn this.hasAttribute('new'); }
   set new(new) { this.toggleAttribute('new', new); }
  
   handleClick() {
     this.remove();
   }
  
   render() {
     return html`
        <div class="header">
          <slot="headline"></slot>
          ${this.new ? html`<img "./new.svg" aria-hidden="true" />` : html``}
        </div>
        <div class="content" part="content">
          <slot="image"></slot>
          <slot></slot>
        </div>
        <div class="actions">
          <slot="actions"></slot>
        </div>
        ${this.dismissable ? html`<button @click=${this.handleClick}>X</button>` : html``}
     `;
   }
}

index.html

<tempalte
  custom-element-tag-name="custom-card"
  custom-element-behavior="./custom-card.definition.js"
  custom-element-adopted-style-sheets="./custom-card-styles.css"
>
  <div class="header">
    <slot="headline"></slot>
  </div>
  <div class="content" part="content">
    <slot="image"></slot>
    <slot></slot>
  </div>
  <div class="actions">
    <slot="actions"></slot>
  </div>
</tempalte>

<custom-card new>
  <h1 slot="headline">You've got a card!</h1>
  <p>And, it says lot and lot of really cool things about itself. It doesn't let you do anything though... :'(</p>
</custom-card>

<custom-card dismissable>
  <h1 slot="headline">And, you've got a card!</h1>
  <p>We're getting close to everyone having a card here... Maybe we should do something about it?</p>
  <button slot="actions">Give someone a card</button>
  <button slot="actions">Place shocked hands on your face</button>
</custom-card>

<custom-card dismissable>
  <h1 slot="headline">Everyone loves cards, right?</h1>
  <p>I think so. And, now that everyon have a card...</p>
  <img
       slot="image"
       src="https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExanR4YXYxcGg2OWE1MzM1NGNjMWt6NHhzZW9qNzNlbGp1MjV6djJ2byZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/Q3siJKQdEjjtZMpR8Q/giphy.gif"
       alt="Everyone gets a card"
  />
  <button slot="actions">Stand up and scream</button>
</custom-card>