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

  <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

  <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.
/* 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");

body {
  min-height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: Roboto;
    class extends HTMLElement {
        constructor() {
            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;


External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.