如何解决如何选择 web 组件的 shadow-dom ::part() 的 :first-child
我正在尝试增加 Web 组件网格元素中左单元格的填充。 (它不是基于 HTML 表格 - 没有等 - 而是基于行和单元格。)
这是呈现的 Web 组件的部分示例:
List
行和单元格使用部分语法(即 part="row" 和 part="cell")公开。 我能够找到单元格部分并增加填充,但它适用于每个单元格:
<div class="row" part="row" first="" style="position: absolute; left: 0px; min-width: 100%;">
<div class="cell" part="cell" halign="left" valign="top" style="min-height: 48px;">
<label part="cell-label">empty</label>
</div>
<div class="cell" part="cell" halign="left" valign="top" style="min-height: 48px;">
<label part="cell-label">label text</label>
</div>
<div class="cell" part="cell" halign="left" valign="top" style="min-height: 48px;">
<span style="overflow: hidden; min-height: 32px; display: flex; align-items: flex-start;">
5 Parts</span>
</div>
</div>
grid::part(core-grid)::part(cell){
padding-left: 24px !important;
}
单元格的父级是一行,所以两者都暴露给全局 CSS。感觉我已经很接近解决方案了...
解决方法
不幸的是,规范 (https://drafts.csswg.org/css-shadow-parts-1/#part) 指出 :first-child
不支持使用“结构伪类”,例如 part
:
::part() 伪元素可以在其后添加额外的伪类,例如 x-button::part(label):hover,但永远不会匹配结构伪类或任何其他伪类匹配基于树信息而不是本地元素信息。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。