<template id="web-picture-tpl">
  <!-- compiled css of current pen -->
  <link rel="stylesheet" href="https://codepen.io/WinterSilence/pen/VwmVobN.scss">
  <style>
    picture,
    picture>source,
    picture>img {
      display: inline-block;
    }
  </style>
  <picture>
    <source srcset="" type="image/webp">
    <img src="" alt="">
  </picture>
</template>

<strong>Demo:</strong>
<div class="container">
  <web-picture srcset="https://www.gstatic.com/webp/gallery2/5.webp" src="https://www.gstatic.com/webp/gallery2/5.png" alt="example" id="img-1" class="pic" img-class="img-fluid img-thumbnail"></web-picture>
</div>

body {
  padding: 1rem;
}
.img-fluid {
  max-width: 100%;
  height: auto;
}
.img-thumbnail {
  padding: 0.25rem;
  background-color: #fff;
  border: 2px solid #dee2e6;
  border-radius: 0.25rem;
}
.container {
  display: block;
  position: relative;
  width: 400px;
  height: auto;
}
web-picture {
  display: inline-block;
  width: auto;
  height: auto;
}

class HTMLWebPictureElement extends HTMLPictureElement {
  static get observedAttributes() {
    return [
      'srcset', 'src', 'alt',
      'class', 'id', 'style',
      'img-class', 'img-id', 'img-style'
    ];
  }
  constructor() {
    super();

    this.attachShadow({mode: "open"});
    this.shadowRoot.appendChild(
      document.getElementById("web-picture-tpl").content.cloneNode(true)
    );
    this.pictureElement = this.shadowRoot.querySelector("picture");
    this.sourceElement = this.shadowRoot.querySelector("source");
    this.imgElement = this.shadowRoot.querySelector("img");
  }
  attributeChangedCallback(name, oldValue, newValue) {
      if (["srcset", "src", "alt"].indexOf(name) > -1) {
        this[name] = newValue;
      } else if (name.startsWith("img-")) {
        this.imgElement.setAttribute(name.substr(4), newValue);
      } else {
        this.pictureElement.setAttribute(name, newValue);
      }
  }
  connectedCallback() {
    if (!this.hasAttribute("srcset")) {
      console.error(
        'HTMLWebPictureElement: required attribute "srcset" not set'
      );
    }
    if (!this.hasAttribute("src")) {
      console.error('HTMLWebPictureElement: required attribute "src" not set');
    }
  }
  // source image
  get srcset() {
    return this.sourceElement.getAttribute("srcset");
  }
  set srcset(value) {
    this.sourceElement.setAttribute("srcset", value);
    this.sourceElement.setAttribute(
      "type",
      "image/" + value.split(".").pop().toLowerCase()
    );
  }
  // main image
  get src() {
    return this.imgElement.getAttribute("src");
  }
  set src(value) {
    this.imgElement.setAttribute("src", value);
  }
  get alt() {
    return this.imgElement.getAttribute("alt");
  }
  set alt(value) {
    this.imgElement.setAttribute("alt", value);
  }
}

customElements.define("web-picture", HTMLWebPictureElement, {extends: "picture"});