text: const template = document.createElement("template");
  
  template.innerHTML = `
  <style>
  	.card {
  		font-family: Helvetica, sans-serif;
  		color: #414141;
  		margin: 10px auto;
  		width: 350px;
  		border-radius: 9px;
  		box-shadow: 2px 3px 12px -3px grey;
  		border: 1px solid lightgrey;
  	}
  	.card__image {
  		border-radius: 8px 8px 0px 0px;
  		width: 100%;
  	}
  	.card__content {
  		padding: 20px;
  	}
  	.m-0 {
  		margin-bottom: 0;
  	}
  	.topic {
  		color: #d8aa86;
  		font-family: Helvetica, sans-serif;
  		text-transform: uppercase;      
  	}
  	.title {
  		display: block;
  		max-width: 90%;
  		color: #0d0945;
  		white-space: nowrap;
  		overflow: hidden;
  		text-overflow: ellipsis;
  		margin-top: 10px;
  	}
  	.text-ellipsis {
  		display: block;
  		max-width: 90%;
  		color: #0d0945;
  		white-space: nowrap;
  		overflow: hidden;
  		text-overflow: ellipsis;
  	}
  	#show-more {
  		display: inline;
  		font-size: 13px;
  		cursor: pointer;
  	}
  </style>
  
  <div class="card">
  	
  	<img class="card__image" /> 
  	
  	<div class="card__content">
  	
  		<slot name="topic" class="topic"></slot>
  		
  		<h2 class="title" 
  		title="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius eligendi dignissimos numquam dolores?">
  		Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius eligendi dignissimos numquam dolores?</h2>
  		
  		<p class="m-0"><slot name="text" class="text text-ellipsis"></slot></p>
  		
  		<div id="show-more"></div>
  		
  		<slot></slot>
  	
  	</div>
  	
  	<slot name="footer"></slot>
  </div>
  `;
  
  class Card extends HTMLElement {
  	constructor() {
  		super();
  		this.text = "";
  		this.attachShadow({
  			mode: "open",
  		});
  	}
  
  	connectedCallback() {
  		this.shadowRoot.appendChild(template.content.cloneNode(true));
  		this.shadowRoot
  				.querySelector(".card__image")
  				.setAttribute("src", this.getAttribute("image"));
  
  		this.shadowRoot.querySelector("#show-more").innerHTML = this.getAttribute("showMoreText")
  		this.shadowRoot.querySelector("#show-more").onclick = () => this.toggleText()
  	}
  
  	toggleText() {
  		this.shadowRoot.querySelector(".text").classList.remove('text-ellipsis');
  		this.shadowRoot.querySelector("#show-more").style.display = 'none'
  	}
  }
  
  customElements.define("my-card", Card);
  
  const template2 = document.createElement('template');
  
  template2.innerHTML = `
  <style>
    .card-footer-section {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      padding: 20px;
      color: #414141;
      border-top: 1px solid #f1f1f1;
      box-sizing: border-box;
      font-family: Helvetica, sans-serif;
      font-size: 14px;
    }
    .card-footer-section figure {
      height: 40px;
      width: 40px;
      border-radius: 50%;
      overflow: hidden;
      margin: 0;
    }
    .card-footer-section figure img {
      max-width: 40px;
    }
    .card-footer-section p {
      padding-left: 10px;
    }
    .card-footer-section span {
      text-decoration: underline;
    }
    .card-footer-section em {
      color: #d8aa86;
    }
    section 
  </style>
  
  <section class="card-footer-section">
    <figure>
      <img src="" alt="">
  	</figure>
    <p>by <span></span> on <em></em></p>
  </section>
  `;
  
  class CardFooter extends HTMLElement {
  	constructor() {
  		super();
  
  		this.attachShadow({ mode: 'open' });
  	}
  
  	connectedCallback() {
  		this.shadowRoot.appendChild(template2.content.cloneNode(true));
  		this.shadowRoot.querySelector('img').setAttribute('src', this.getAttribute('image'));
  		this.shadowRoot.querySelector('img').setAttribute('alt', this.getAttribute('alt'));
  		this.shadowRoot.querySelector('em').innerText = this.getAttribute('date') || 'November 5, 2021';
  		this.shadowRoot.querySelector('span').innerText = this.getAttribute('userName') || 'John Doe';
  	}
  
  }
  
  window.customElements.define('card-footer', CardFooter);
  