WebComponent Image

by amindunited

HTML

<shadow-image url="https://static.tvmaze.com/uploads/images/medium_portrait/267/669639.jpg"></shadow-image>
<shadow-image url="https://static.tvmaze.com/uploads/images/medium_portrait/273/683813.jpg"></shadow-image>
<shadow-image url="https://static.tvmaze.com/uploads/images/medium_portrait/224/562175.jpg"></shadow-image>
<shadow-image url="https://static.tvmaze.com/uploads/images/medium_portrait/241/602832.jpg"></shadow-image>

JavaScript

/**
 * Import / require / include this class:
 * Add the Element to the HTML as above
 * Declare the Element (See: Line 136 - `customElements.define('shadow-image', ShadowImage);`)
 */
class ShadowImage extends HTMLElement {
	constructor() {
  	super();
    this.setAttribute('style', "display: inline-block;")
    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) {
         ...