summaryrefslogtreecommitdiff
path: root/devdocs/html/global_attributes%2Fexportparts.html
diff options
context:
space:
mode:
authorCraig Jennings <c@cjennings.net>2024-04-07 13:41:34 -0500
committerCraig Jennings <c@cjennings.net>2024-04-07 13:41:34 -0500
commit754bbf7a25a8dda49b5d08ef0d0443bbf5af0e36 (patch)
treef1190704f78f04a2b0b4c977d20fe96a828377f1 /devdocs/html/global_attributes%2Fexportparts.html
new repository
Diffstat (limited to 'devdocs/html/global_attributes%2Fexportparts.html')
-rw-r--r--devdocs/html/global_attributes%2Fexportparts.html55
1 files changed, 55 insertions, 0 deletions
diff --git a/devdocs/html/global_attributes%2Fexportparts.html b/devdocs/html/global_attributes%2Fexportparts.html
new file mode 100644
index 00000000..cbb80f48
--- /dev/null
+++ b/devdocs/html/global_attributes%2Fexportparts.html
@@ -0,0 +1,55 @@
+<header><h1>exportparts</h1></header><div class="section-content">
+<p>The <code>exportparts</code> <a href="../global_attributes">global attribute</a> allows you to select and style elements existing in nested <a href="https://developer.mozilla.org/en-US/docs/Glossary/Shadow_tree">shadow trees</a>, by exporting their <code>part</code> names.</p> <p> The shadow tree is an isolated structure where identifiers, classes, and styles cannot be reached by selectors or queries belonging to a regular DOM. To apply a style to an element living in a shadow tree, by CSS rule created outside of it, <a href="../global_attributes#part"><code>part</code></a> global attribute has to be used. It has to be assigned to an element present in Shadow Tree, and its value should be some identifier. Rules present outside of the shadow tree, must use the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part"><code>::part</code></a> pseudo-element, containing the same identifier as the argument. </p> <p>The global attribute <a href="../global_attributes#part"><code>part</code></a> makes the element visible on just a single level of depth. When the shadow tree is nested, parts will be visible only to the parent of the shadow tree but not to its ancestor. Exporting parts further down is exactly what <code>exportparts</code> attribute is for.</p> <p>Attribute <code>exportparts</code> must be placed on a <em>shadow Host</em>, which is the element to which the <em>shadow tree</em> is attached. The value of the attribute should be a comma-separated list of part names present in the shadow tree and which should be made available via a DOM outside of the current structure.</p>
+</div>
+<h2 id="specifications">Specifications</h2>
+<div class="_table"><table class="standard-table">
+<thead><tr><th scope="col">Specification</th></tr></thead>
+<tbody><tr><td><a href="https://drafts.csswg.org/css-shadow-parts/#element-attrdef-html-global-exportparts">CSS Shadow Parts <br><small># element-attrdef-html-global-exportparts</small></a></td></tr></tbody>
+</table></div>
+<h2 id="browser_compatibility">Browser compatibility</h2>
+<div class="_table"><table>
+<thead>
+<tr id="bct-browser-type">
+<th></th>
+<th colspan="6">Desktop</th>
+<th colspan="6">Mobile</th>
+</tr>
+<tr id="bct-browsers">
+<th></th>
+<th>Chrome</th>
+<th>Edge</th>
+<th>Firefox</th>
+<th>Internet Explorer</th>
+<th>Opera</th>
+<th>Safari</th>
+<th>WebView Android</th>
+<th>Chrome Android</th>
+<th>Firefox for Android</th>
+<th>Opera Android</th>
+<th>Safari on IOS</th>
+<th>Samsung Internet</th>
+</tr>
+</thead>
+<tbody><tr>
+<th><code>exportparts</code></th>
+<td class="bc-supports-yes">73</td>
+<td class="bc-supports-yes">79</td>
+<td class="bc-supports-yes">72</td>
+<td class="bc-supports-no">No</td>
+<td class="bc-supports-yes">60</td>
+<td class="bc-supports-yes">13.1</td>
+<td class="bc-supports-yes">73</td>
+<td class="bc-supports-yes">73</td>
+<td class="bc-supports-yes">79</td>
+<td>?</td>
+<td class="bc-supports-yes">13.4</td>
+<td class="bc-supports-yes">11.0</td>
+</tr></tbody>
+</table></div>
+<h2 id="see_also">See also</h2>
+<div class="section-content"><ul> <li>All <a href="../global_attributes">global attributes</a>.</li> </ul></div><div class="_attribution">
+ <p class="_attribution-p">
+ &copy; 2005&ndash;2023 MDN contributors.<br>Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.<br>
+ <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts</a>
+ </p>
+</div>