exportparts-different-scope.html (946B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> 4 <link rel="author" href="https://mozilla.org" title="Mozilla"> 5 <link rel="help" href="https://drafts.csswg.org/css-shadow-parts/"> 6 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1854658"> 7 <link rel="match" href="exportparts-different-scope-ref.html"> 8 <style> 9 my-foo::part(text) { color: green; } 10 my-bar::part(text) { color: red; background-color: red; } 11 </style> 12 <my-foo></my-foo> 13 <script> 14 customElements.define('my-foo', class extends HTMLElement { 15 constructor(){ 16 super() 17 this.attachShadow({mode: 'closed'}).innerHTML = ` 18 <my-bar exportparts="text"></my-bar> 19 `; 20 } 21 }) 22 23 customElements.define('my-bar', class extends HTMLElement { 24 constructor(){ 25 super() 26 this.attachShadow({mode: 'closed'}).innerHTML = ` 27 <span part="text">Should be green</span> 28 `; 29 } 30 }) 31 </script>