Created
January 11, 2019 16:02
-
-
Save newbornfrontender/11f2e88a0e85987bea9ae82c52f6c539 to your computer and use it in GitHub Desktop.
CSS Shadow Parts (пример)
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
| /* Стилизуем части */ | |
| /* Из index.js */ | |
| my-app::part(text-first) { | |
| color: cyan; | |
| } | |
| /* Из my-greeting.js */ | |
| my-app::part(title-color) { | |
| color: purple; | |
| } |
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"> | |
| <title>Shadow Parts (пример)</title> | |
| <link rel="stylesheet" href="index.css"> | |
| </head> | |
| <body> | |
| <my-app></my-app> | |
| <script type="module"> | |
| import '/index.js'; | |
| </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
| import '/my-greeting.js'; | |
| const template = document.createElement('template'); | |
| template.innerHTML = ` | |
| <style> | |
| p:first-of-type { | |
| color: red; | |
| } | |
| p:nth-of-type(2) { | |
| color: green; | |
| } | |
| p:last-of-type { | |
| color: blue; | |
| } | |
| </style> | |
| <!-- Экспортируем из компонента имена частей (part) --> | |
| <!-- Если этого не сделать, то не получится стилизовать элемент в --> | |
| <!-- index.html или index.css --> | |
| <my-greeting exportparts="title-color">Hello there!</my-greeting> | |
| <hr> | |
| <!-- Указываем имена частей (part) --> | |
| <p part="text-first">First (red)</p> | |
| <p part="text-second">Second (green)</p> | |
| <p part="text-third">Third (blue)</p> | |
| `; | |
| class MyApp extends HTMLElement { | |
| constructor() { | |
| super(); | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.appendChild(template.content.cloneNode(true)); | |
| }; | |
| }; | |
| customElements.define('my-app', MyApp); |
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
| const template = document.createElement('template'); | |
| template.innerHTML = ` | |
| <style> | |
| h1 { | |
| color: orange; | |
| } | |
| </style> | |
| <h1 part="title-color"> | |
| <slot>Hello world!</slot> | |
| </h1> | |
| `; | |
| class MyGreeting extends HTMLElement { | |
| constructor() { | |
| super(); | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.appendChild(template.content.cloneNode(true)); | |
| }; | |
| }; | |
| customElements.define('my-greeting', MyGreeting); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment