@@ -165,18 +165,18 @@ The "part name" should be considered similar to a class,
165
165
not an id or tagname.
166
166
167
167
<pre class="example">
168
- <style>
168
+ <style>
169
169
c-e<b> ::part(textspan)</b> { color: red; }
170
- </style>
170
+ </style>
171
171
172
- <template id="c-e-template">
173
- <span <b> part="textspan"</b> > This text will be red</span>
174
- </template>
175
- <c-e>& lt;/c-e>
176
- <script>
172
+ <template id="c-e-template">
173
+ <span <b> part="textspan"</b> > This text will be red</span>
174
+ </template>
175
+ <c-e>& lt;/c-e>
176
+ <script>
177
177
// Add template as custom element c-e
178
178
...
179
- </script>
179
+ </script>
180
180
</pre>
181
181
182
182
Forwarding a Shadow Element: the <{html-global/exportparts}> attribute {#exportparts-attr}
@@ -207,32 +207,32 @@ Each part mapping is one of:
207
207
Note: It's okay to map a sub-part to several names.
208
208
209
209
<pre class="example">
210
- <style>
210
+ <style>
211
211
c-e<b> ::part(textspan)</b> { color: red; }
212
- </style>
212
+ </style>
213
213
214
- <template id="c-e-outer-template">
215
- <c-e-inner <b> exportparts="innerspan: textspan"</b> >& lt;/c-e-inner>
216
- </template>
214
+ <template id="c-e-outer-template">
215
+ <c-e-inner <b> exportparts="innerspan: textspan"</b> >& lt;/c-e-inner>
216
+ </template>
217
217
218
- <template id="c-e-inner-template">
219
- <span <b> part="innerspan"</b> >
218
+ <template id="c-e-inner-template">
219
+ <span <b> part="innerspan"</b> >
220
220
This text will be red because the containing shadow
221
221
host forwards <b> innerspan</b> to the document as "textspan"
222
222
and the document style matches it.
223
- </span>
224
- <span <b> part="textspan"</b> >
223
+ </span>
224
+ <span <b> part="textspan"</b> >
225
225
This text will not be red because <b> textspan</b> in the document style
226
226
cannot match against the part inside the inner custom element
227
227
if it is not forwarded.
228
- </span>
229
- </template>
228
+ </span>
229
+ </template>
230
230
231
- <c-e>& lt;/c-e>
232
- <script>
231
+ <c-e>& lt;/c-e>
232
+ <script>
233
233
// Add template as custom elements c-e-inner, c-e-outer
234
234
...
235
- </script>
235
+ </script>
236
236
</pre>
237
237
238
238
Selecting a Shadow Element: the ''::part()'' pseudo-element {#part}
0 commit comments