Created
January 11, 2019 16:05
-
-
Save newbornfrontender/7e281463071a1637e00bc979eed6d4b3 to your computer and use it in GitHub Desktop.
Construct Stylesheets (пример)
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
| /* Раскоментируйте чтобы увидеть изменения */ | |
| /* p { | |
| color: coral; | |
| } */ | |
| /* Переопределяет встроенные стили компонента */ | |
| /* Раскоментируйте чтобы увидеть изменения */ | |
| /* p:last-of-type { | |
| color: cyan; | |
| } */ | |
| p:nth-of-type(5) { | |
| color: blue; | |
| } |
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>Construct Stylesheets (пример)</title> | |
| </head> | |
| <body> | |
| <my-app></my-app> | |
| <script type="module"> | |
| import '/index.js'; | |
| const app = document.querySelector('my-app'); | |
| const sheet = new CSSStyleSheet(); | |
| // Раскоментируйте участки кода 22-32, 43 чтобы увидеть изменения | |
| // sheet.replaceSync(` | |
| // p:nth-of-type(5) { | |
| // color: blue; | |
| // } | |
| // /* Переопределяет встроенные стили компонента */ | |
| // /* p:last-of-type { | |
| // color: cyan; | |
| // } */ | |
| // `); | |
| // Подключение внешних стилей | |
| // Раскоментируйте участки кода 37-39, 43 чтобы увидеть изменения | |
| // sheet.replace(` | |
| // @import url(index.css) | |
| // `); | |
| // Переопределяет "construct stylesheets" стили из компонента | |
| // Раскоментируйте чтобы увидеть изменения | |
| // app.shadowRoot.adoptedStyleSheets = [sheet]; | |
| </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
| /** | |
| * 1. replace(text) - возвращает Promise, который разрешится после завершения | |
| * загрузки всех @import правил | |
| * | |
| * 2. replaceSync(text) - заменяет содержимое таблицы стилей синхронно, но не | |
| * допускает никаких @import правил | |
| * | |
| * 3. insertRule(rule) - вставляет одно правило | |
| * | |
| * 4. deleteRule(rule) - удаляет одно правило | |
| */ | |
| const template = document.createElement('template'); | |
| template.innerHTML = ` | |
| <style> | |
| p:first-of-type { | |
| color: red; | |
| } | |
| p:last-of-type { | |
| color: green; | |
| } | |
| </style> | |
| <p>Red (inner)</p> | |
| <p>Orange (construct stylesheets (inner - replace))</p> | |
| <p>Purple (construct stylesheets (inner - replaceSync))</p> | |
| <p>Pink (construct stylesheets (inner - insertRule))</p> | |
| <p>Blue (construct stylesheets (outside - replaceSync / replace))</p> | |
| <p>Green (inner)</p> | |
| `; | |
| // [ replace ] ----------------------------------------------------------------- | |
| const sheetReplace = new CSSStyleSheet(); | |
| sheetReplace.replace(` | |
| p:nth-of-type(2) { | |
| color: orange; | |
| } | |
| `); | |
| // [ replaceSync ] ------------------------------------------------------------- | |
| const sheetReplaceSync = new CSSStyleSheet(); | |
| sheetReplaceSync.replaceSync(` | |
| p:nth-of-type(3) { | |
| color: purple; | |
| } | |
| `); | |
| // [ insertRule ] -------------------------------------------------------------- | |
| const sheetInsertRule = new CSSStyleSheet(); | |
| sheetInsertRule.insertRule(` | |
| p:nth-of-type(4) { | |
| color: pink; | |
| } | |
| `); | |
| // [ deleteRule ] -------------------------------------------------------------- | |
| const sheetDeleteRule = new CSSStyleSheet(); | |
| // Добавляем правило, которое потом удалим | |
| sheetDeleteRule.replace(` | |
| p:nth-of-type(5) { | |
| color: lightgray; | |
| } | |
| `); | |
| // Тут должен быть числовой индекс правила -> | |
| // https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/deleteRule | |
| sheetDeleteRule.deleteRule(0); | |
| // ----------------------------------------------------------------------------- | |
| export class MyApp extends HTMLElement { | |
| constructor() { | |
| super(); | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.appendChild(template.content.cloneNode(true)); | |
| // Добавляем таблицы стилей | |
| this.shadowRoot.adoptedStyleSheets = [ | |
| sheetReplace, | |
| sheetReplaceSync, | |
| sheetInsertRule, | |
| sheetDeleteRule, | |
| ]; | |
| }; | |
| }; | |
| customElements.define('my-app', MyApp) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment