Created
September 4, 2017 23:19
-
-
Save anonymous/024b598172a2deaf40939c2dc8e2f206 to your computer and use it in GitHub Desktop.
JS Bin // source http://jsbin.com/rogopipubo
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.10/custom-elements-es5-adapter.js"></script> | |
| <style id="jsbin-css"> | |
| ::content .product-img { | |
| width: 12px; | |
| cursor: pointer; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <my-foo data-name="Ruby" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/ruby.png" data-url="http://example.com/1"></my-foo> | |
| <script id="jsbin-javascript"> | |
| function Foo() { | |
| HTMLElement.call(this) | |
| // Create a shadow root | |
| var shadow = this.attachShadow({mode: 'open'}); | |
| // Create a standard img element and set it's attributes. | |
| var img = document.createElement('img'); | |
| img.alt = this.getAttribute('data-name'); | |
| img.src = this.getAttribute('data-img'); | |
| img.width = '150'; | |
| img.height = '150'; | |
| img.className = 'product-img'; | |
| // Add the image to the shadow root. | |
| shadow.appendChild(img); | |
| // Add an event listener to the image. | |
| img.addEventListener('click', () => { | |
| window.location = this.getAttribute('data-url'); | |
| }); | |
| // Create a link to the product. | |
| var link = document.createElement('a'); | |
| link.innerText = this.getAttribute('data-name'); | |
| link.href = this.getAttribute('data-url'); | |
| link.className = 'product-name'; | |
| // Add the link to the shadow root. | |
| shadow.appendChild(link); | |
| } | |
| Foo.prototype = Object.create(HTMLElement.prototype) | |
| Foo.prototype.constructor = Foo | |
| customElements.define("my-foo", Foo); | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">::content .product-img { | |
| width: 12px; | |
| cursor: pointer; | |
| }</script> | |
| <script id="jsbin-source-javascript" type="text/javascript">function Foo() { | |
| HTMLElement.call(this) | |
| // Create a shadow root | |
| var shadow = this.attachShadow({mode: 'open'}); | |
| // Create a standard img element and set it's attributes. | |
| var img = document.createElement('img'); | |
| img.alt = this.getAttribute('data-name'); | |
| img.src = this.getAttribute('data-img'); | |
| img.width = '150'; | |
| img.height = '150'; | |
| img.className = 'product-img'; | |
| // Add the image to the shadow root. | |
| shadow.appendChild(img); | |
| // Add an event listener to the image. | |
| img.addEventListener('click', () => { | |
| window.location = this.getAttribute('data-url'); | |
| }); | |
| // Create a link to the product. | |
| var link = document.createElement('a'); | |
| link.innerText = this.getAttribute('data-name'); | |
| link.href = this.getAttribute('data-url'); | |
| link.className = 'product-name'; | |
| // Add the link to the shadow root. | |
| shadow.appendChild(link); | |
| } | |
| Foo.prototype = Object.create(HTMLElement.prototype) | |
| Foo.prototype.constructor = Foo | |
| customElements.define("my-foo", Foo);</script></body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ::content .product-img { | |
| width: 12px; | |
| cursor: pointer; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function Foo() { | |
| HTMLElement.call(this) | |
| // Create a shadow root | |
| var shadow = this.attachShadow({mode: 'open'}); | |
| // Create a standard img element and set it's attributes. | |
| var img = document.createElement('img'); | |
| img.alt = this.getAttribute('data-name'); | |
| img.src = this.getAttribute('data-img'); | |
| img.width = '150'; | |
| img.height = '150'; | |
| img.className = 'product-img'; | |
| // Add the image to the shadow root. | |
| shadow.appendChild(img); | |
| // Add an event listener to the image. | |
| img.addEventListener('click', () => { | |
| window.location = this.getAttribute('data-url'); | |
| }); | |
| // Create a link to the product. | |
| var link = document.createElement('a'); | |
| link.innerText = this.getAttribute('data-name'); | |
| link.href = this.getAttribute('data-url'); | |
| link.className = 'product-name'; | |
| // Add the link to the shadow root. | |
| shadow.appendChild(link); | |
| } | |
| Foo.prototype = Object.create(HTMLElement.prototype) | |
| Foo.prototype.constructor = Foo | |
| customElements.define("my-foo", Foo); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment