Web Component: <mas-informacion />

mas-informacion.html

<mas-informacion>
  <label slot="titulo">Quiero saber más</label>
  <div slot="contenido">

      <p>Nam eget bibendum elit. Donec mollis tortor in nibh tincidunt, id cursus diam auctor. Praesent laoreet quis sapien nec vulputate. Curabitur a pellentesque massa, non scelerisque massa. Suspendisse et vulputate dolor. Praesent porttitor dictum dolor. Sed ac nulla eget massa congue pulvinar. Curabitur vitae fermentum diam. In in aliquet ipsum.</p>
  </div>
</mas-informacion>


<template id="mas-informacion">
  <style>
    button {
      border: none;
      background: none;
      margin: 0;
      padding: 0;
      cursor: pointer;
    }
    
    [name="titulo"] {
      font-weight: bold;
    }
    
    #contenido {
      display: none;
    }
  </style>
  <button>
    <slot name="titulo">Más información</slot>
    <span id="flecha">🔽</span>
  </button>
  <div id="contenido">
    <slot name="contenido"></slot>
  </div>
</template>

script.js

function cargarTemplate(referenciaTemplate, instanciaComponente) {
    const template = document.querySelector(referenciaTemplate);
    const templateContent = template.content;
    instanciaComponente.attachShadow({ mode: "open" })
      .appendChild(templateContent.cloneNode(true));
  }

class MasInformacion extends HTMLElement {
  constructor() {
    super();
    cargarTemplate("#mas-informacion", this);
  }
  
  /**
  Esta función nos permite acceder a los elementos internos del componente
  **/
  connectedCallback() {
    // Para acceder a los elementos del componente creado,
    // utilizamos this.shadowRoot.
    this.agregarComportamientoOcultarMostrar();
  }
  
  agregarComportamientoOcultarMostrar() {
    const component = this.shadowRoot;
    
    component.querySelector("button").addEventListener("click", () => this.ocultarMostrar());        
  }
  
  ocultarMostrar() {
    const component = this.shadowRoot;
    const contenido = component.querySelector("#contenido");
    const flecha = component.querySelector("#flecha");
    if (contenido.style.display === "none") {
      contenido.style.display = "block";
      flecha.innerHTML = "🔼";
    } else {
      contenido.style.display = "none";
      flecha.innerHTML = "🔽";
    }
  }
}

customElements.define("mas-informacion", MasInformacion);

web-component-mas-informacion.markdown

Web Component:

A Pen by Joel Alejandro Villarreal Bertoldi on CodePen.

License.