<div class="container-fluid">
  <header>
    <h1>Custom Element Demo</h1>
  </header>
  <hr/>
  <div class="row">
    <div class="col-sm-6">
      <div id="prefill">
        <div class="input-group">
          <span class="input-group-addon">
            Autofill this form
          </span>
          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="opts">
          </div>
          <button class="btn btn-secondary dropdown-toggle form-control" type="button" id="opts" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Select Data</button>
        </div>
      </div>
      <hr />
      <form>
      <div class="form">
        <div class="form-group">
          <label for="width">Width <small class="text-muted">(in px)</small></label>
          <input type="number" class="form-control" id="width" placeholder="Width">
        </div>
        <div class="form-group">
          <label for="alt">Alt <small class="text-muted">(can be empty)</small></label>
          <input type="text" class="form-control" id="alt" placeholder="Alt Attriibute">
        </div>
        <div class="form-group">
          <label for="src">Source Image <small class="text-muted">(src)</small></label>
          <input type="url" class="form-control" id="src" placeholder="http://.....">
        </div>
        <div class="form-group">
          <label for="caption">Caption <small class="text-muted">(figcaption)</small></label>
          <input type="text" class="form-control" id="caption" placeholder="Caption">
        </div>
      </div>
      <div>
        <button type="button" class="btn btn-primary" id="append">Add</button>
        <button type="button" class="btn btn-danger float-right" id="clear">Remove all</button>
        <button type="reset" class="btn btn-warning">Reset</button>
      </div>
      </form>
      <hr>
    </div>
    <div class="col-sm-6">
      <div id="app"></div>
    </div>
  </div>
</div>
img-figure1 {
  display: block;
  max-width: 400px;
}
img-figure1 img {
  max-width: 100%;
}
img-figure1 figcaption {
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
elName = 'img-figure1';
class ImgFigure1 extends ImgFigure {
  static get observedAttributes() {
    return ['src'];
  }

  attributeChangedCallback(attr, oldValue, newValue) {
    if(oldValue === newValue){
      return;
    }
    if (attr == 'src' && this.querySelector('img')) {
      this.querySelector('img').src = newValue;
    }
  }
}
customElements.define('img-figure1', ImgFigure1);

clear();
add(data[0]);

let i = 0;
setInterval(function(){
  document.querySelector('img-figure1').setAttribute('src', data[i].src);
  i++;
  if(i === 3) {
    i = 0;
  }
}, 2000)

External CSS

  1. //cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css
  2. //cdn.rawgit.com/pankajpatel/c4889cc260bdd79007a02045c0cdbd90/raw/47a7e860ea2d3b367b533ec4ff4e351755008f14/prettify.css
  3. //codepen.io/pankajpatel/pen/vWVwBa.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.19/webcomponents-hi-sd-ce.js
  2. //cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.min.js
  3. //codepen.io/pankajpatel/pen/vWVwBa.js