Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="web-components-demo2">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
<!-- 
  HTML template,already one of html5 standard
  we can use this template for being placeholder of our customer-element
  which is <gakki-div-template> here
-->
<template id="gakki-div-template">
  <style>
    :host {
      position: relative;
      display: block;
      width: 300px;
    }
    p {
      color: orange;
    }
    .slot {
      font-size: 20px;
      position: absolute;
      bottom: 20px;
      right: 50px;
      color: yellow;
    }
    .wrapper {
      position: relative;
      width: 100%;
      height: 100%;
    }
    .wrapper img {
    }
  </style>
  <p>Gakki Meme</p>
  <div class="wrapper">
    <img width="300px" src="http://static.ettoday.net/images/2083/d2083850.jpg" />
    <div class="slot">
      <slot name="title"></slot>
    </div>
  </div>
</template>
    
    
<!-- Scripts for create shadow dom -->
<script>
  class GakkiTemplate extends HTMLElement {
  static get observedAttributes() {
    return ['add'];
  }
    
  // A getter/setter for an add property.
  get add() {
    return this.hasAttribute('add');
  }
  set add(val) {
    // Reflect the value of the change property as an HTML attribute.
    if (val) {
      this.setAttribute('add', '');
    } else {
      this.removeAttribute('add');
    }
    this.changeImg();
  }
    
  get light() {
    return this.hasAttribute('light');
  }
  set light(val) {
    // Reflect the value of the light property as an HTML attribute.
    if (val) {
      this.setAttribute('light', '');
    } else {
      this.removeAttribute('light');
    }
  }
  // Can define constructor arguments if you wish.
  constructor() {
    super(); // always call super() first in the ctor.
    let shadowRoot = this.attachShadow({mode: 'open'});
    const t = document.querySelector('#gakki-div-template');
    const instance = t.content.cloneNode(true);
    shadowRoot.appendChild(instance);
    this.shadowDOM = shadowRoot;
    // Setup a click listener on <gakki-div-template> itself.
    this.addEventListener('click', e => {
     
      this.addImg();
    });
  }
    
    // Only called for the change attributes due to observedAttributes
  attributeChangedCallback(name, oldValue, newValue) {
    if (this.add) {
      this.addImg();
    }
  }
  addImg() {
    const imgList = ['http://b1-blog.up.seesaa.net/image/gakki.jpg',
                     'http://static.ettoday.net/images/2083/d2083850.jpg',
                     'http://image.cache.storm.mg/styles/smg-600x400-fp/s3/media/image/2016/12/14/20161214-060648_U3260_M227784_53e0.jpg?itok=DIuU32ja'];
    const t = document.querySelector('#gakki-div-template');
    const instance = t.content.cloneNode(true);
    const instanceImg = instance.querySelector('img');
    instanceImg.src = imgList[Math.floor(Math.random() * 3)];
    this.shadowDOM.appendChild(instance);
  }
}
  customElements.define('gakki-div-template', GakkiTemplate);
</script>
    
<!--general html-->
<style>
  .slot {
    color: green!important;
  }
  gakki-div-template[light] {
    opacity: 0.5;
  }
</style>
    
    
    <gakki-div-template light>
      <span slot="title">你好,我是森山</span>
    </gakki-div-template>
    
<div class="slot">other text</div>
    
</body>
 <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.20/webcomponents.min.js"></script>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x