如何解决了解 :host-context 的基础知识
我对:host-context
真的很迷茫。 :(
我看了一些视频,阅读了 MDN 页面,并尝试在 VSCode 中尝试理解。
从我的尝试中我所理解的(可能是错误的)是,使用 :host-context
我可以访问 Shadow DOM 和常规轻量 DOM 之间的“DOM 层”并对其进行样式设置。
有人可以像我 5 岁那样向我解释 :host-context
吗?
解决方法
我的理解是 :host-context
与 :host
类似,只是您可以向它传递一个选择器,并且只有当影子主机与 light DOM 中的选择器匹配时,它才会匹配 .因此,假设您有一个自定义元素 my-element。您想设置此 div 背景颜色的样式:红色,但仅如果 my-element
在 H1 中,因为它不应该出现在 H1 中并且红色是开发人员认为他们犯了错误。
你可以这样做:
:host-context(h1) { background-color: red }
如果 my-element 是 h1 的后代,则红色背景仅显示。
<h1>
<my-element></my-element> <!-- red! warning! -->
</h1>
<div>
<my-element></my-element> <!-- no red,a-ok -->
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。