| <!doctype html> |
| <meta charset="utf-8"> |
| <link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> |
| <link rel="author" href="https://mozilla.org" title="Mozilla"> |
| <link rel="help" href="https://drafts.csswg.org/css-shadow-parts/"> |
| <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1854658"> |
| <link rel="match" href="exportparts-different-scope-ref.html"> |
| <style> |
| my-foo::part(text) { color: green; } |
| my-bar::part(text) { color: red; background-color: red; } |
| </style> |
| <my-foo></my-foo> |
| <script> |
| customElements.define('my-foo', class extends HTMLElement { |
| constructor(){ |
| super() |
| this.attachShadow({mode: 'closed'}).innerHTML = ` |
| <my-bar exportparts="text"></my-bar> |
| `; |
| } |
| }) |
| |
| customElements.define('my-bar', class extends HTMLElement { |
| constructor(){ |
| super() |
| this.attachShadow({mode: 'closed'}).innerHTML = ` |
| <span part="text">Should be green</span> |
| `; |
| } |
| }) |
| </script> |
