-
-
Save Risto-Stevcev/1a3ed6c3f89c322f6dc8a0d595b46844 to your computer and use it in GitHub Desktop.
Web Components Example 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