WebComponent Image

by amindunited

HTML

<shadow-image url="https://static.tvmaze.com/uploads/images/medium_portrait/70/176259.jpg"></shadow-image>

CSS

/*
shadow-image img {
  display: none;
}
shadow-image .image-wrap {
  background-color: black;
  height: 80px;
  width: 80px;
  overflow: hidden;
  text-align: center;
}
shadow-image img.loaded {
  display: inline-block;
  position: relative;
  max-width: 80px;
  max-height: 80px;
  background-color: #000000;
  margin: auto;
}

.image-loading {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
  background-color: #000000;
}
.image-loading.hidden {
  display: none;
}
.image-loading div {
  position: absolute;
  top: 33px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.image-loading div:nth-child(1) {
  left: 8px;
  animation: image-loading1 0.6s infinite;
}
.image-loading div:nth-child(2) {
  left: 8px;
  animation: image-loading2 0.6s infinite;
}
.image-loading div:nth-child(3) {
  left: 32px;
  animation: image-loading2 0.6s infinite;
}
.image-loading div:nth-child(4) {
  left: 56px;
  animation: image-loading3 0.6s infinite;
}
@keyframes image-loading1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes image-loading3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes image-loading2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}
*/

JavaScript

class ShadowImage extends HTMLElement {
	constructor() {
  	super();
    this.shadow = this.attachShadow({mode: 'open'});
  }
  
  connectedCallback () {
  	
    const fragmentOne = document.createDocumentFragment();
    const containerOne = document.createElement('div');
    containerOne.innerHTML = `
      <slot></slot>
    `;
    fragmentOne.appendChild(containerOne);
    this.shadow.appendChild(fragmentOne);

		const fragmentTwo = document.createDocumentFragment();
    const containerTwo = document.createElement('div');
    containerTwo.innerHTML = `
			<style>
        shadow-image img {
          display: none;
        }
        shadow-image .image-wrap {
          background-color: #ffffff;
          box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.5);
          height: 80px;
          width: 80px;
          overflow: hidden;
          text-align: center;
          border-radius: 6px;
          padding: 8px;
        }
        shadow-image img.loaded {
          display: inline-block;
          position: relative;
          max-width: 100%;
          max-height: 100%;
          background-color: #000000;
          margin-left: auto;
          margin-right: auto;
        }

        .image-loading {
          display: inline-block;
          position: relative;
          width: 80px;
          height: 80px;
          background-color: #000000;
        }
        .image-loading.hidden {
          display: none;
        }
        .image-loading div {
          position: absolute;
          top: 33px;
          width: 13px;
          height: 13px;
          border-radius: 50%;
          background: #fff;
          animation-timing-function: cubic-bezier(0, 1, 1, 0);
        }
        .image-loading div:nth-child(1) {
          left: 8px;
          animation: image-loading1 0.6s infinite;
        }
        .image-loading div:nth-child(2) {
          left: 8px;
          animation: image-loading2 0.6s infinite;
        }
        .image-loading div:nth-child(3) {
        ...