Created
April 16, 2015 14:48
-
-
Save ShingoFukuyama/d9a7d314d783afbdd2ac to your computer and use it in GitHub Desktop.
Web製作者のためのCSS設計の教科書 p198 Web Components
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> | |
| </head> | |
| <body> | |
| <my-alert></my-alert><!-- custom element --> | |
| <template id="my-alert-template"> | |
| <style> | |
| .alert { | |
| position: relative; | |
| border-radius: 6px; | |
| border: 1px solid #ddd; | |
| background-color: #eee; | |
| padding: 0.6em 0.6em; | |
| } | |
| .alert__title, | |
| .alert__body > * { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .alert__title { | |
| font-weight: bold; | |
| } | |
| </style> | |
| <div class="alert"> | |
| <p class="alert__title">Alert Title</p> | |
| <div class="alert__body"> | |
| <p>Message</p> | |
| </div> | |
| </div> | |
| </template> | |
| <script> | |
| (function() { | |
| var element = Object.create(HTMLElement.prototype); | |
| // Run when custom elements created | |
| element.createdCallback = function() { | |
| var template = document.querySelector('#my-alert-template'); | |
| var content = template.content; | |
| var shadowRoot = this.createShadowRoot(); | |
| shadowRoot.appendChild(document.importNode(content, true)); | |
| }; | |
| // Register my-alert tag and inherit the object created above | |
| document.registerElement('my-alert', { | |
| prototype: element | |
| }); | |
| })(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment