<template id="skill-template">
  <div>
    <slot name="skill-icon">icon</slot>
    <slot name="skill-name">details</slot>
    <slot name="skill-info">info</slot>
  </div>
</template>

<skill-details>
  <i class="fa fa-lightbulb-o" aria-hidden="true" slot="skill-icon"></i>
  <span slot="skill-name">Intutive</span>
  <span slot="skill-info">
    Fast load times and lag free interaction, for best user
    experience.
  </span>
</skill-details>

<skill-details>
  <i class="fa fa-bolt" aria-hidden="true" slot="skill-icon"></i>
  <span slot="skill-name">Fast</span>
  <span slot="skill-info">
    Easy to use UI that is responsive on devices of all sizes.
  </span>
</skill-details>

/* Additional styling (main styling is in the js file) */

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@700;900&display=swap");

html,
body {
  min-height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: Roboto;
}

customElements.define('skill-details',
    class extends HTMLElement {
        constructor() {
            super();
            const template = document.getElementById('skill-template');
            const templateContent = template.content;

            const shadowRoot = this.attachShadow({ mode: 'open' });

            const style = document.createElement('style');
            style.textContent = `
div {
    margin: 32px;
    max-width: 200px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
::slotted(i) {
    font-size: xx-large !important;
}
::slotted([slot=skill-name]) {
    display: inline-block;
    font-size: larger;
    font-weight: 900;
    text-transform: uppercase;
    margin: 12px 0;
}
::slotted([slot=skill-info]) {
    color: #555555;
    font-weight: 700;
}
            `;

            shadowRoot.appendChild(style);
            shadowRoot.appendChild(templateContent.cloneNode(true));
        }
    })