<html>
<head>
<meta name="description" content="web-component-demo-3">
<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;
}
.slot2 {
font-size: 13px;
position: absolute;
bottom: 20px;
left: 30px;
color: red;
}
::slotted(h2)
.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 class="slot2">
<slot></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');
}
console.log('val', val);
this.addImg();
}
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>
<span slot="title">你好,我是森山</span>
<div>嗨..妳好>//<</div>
</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
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |