* 你希望有什么能力?
希望自定义组件可以支持 :host([attr])、:host(:status) 等选择器语法。
* 你需要这个能力的场景是 ?
我尝试着将 WeUI 封装成自定义组件,比如以下这两段代码封装并使用了 weui-button 组件 —— 其中我希望当 weui-button 的 size 属性为 mini 的时候,这个自定义组件的 display 为 inline-block:
:host([size=mini]) { display : inline- block ; } |
< weui-button type = "primary" size = "mini" > 按钮 </weui-button> |
但目前在最新基础库版本 1.9.91 中无效(具体表现为括号内的选择器被忽视,并直接覆盖了无附加选择器的 :host 的样式,即所有的 weui-button host 都变成了 display: inline-block)。
此外例如在实现列表 Cell 组件时,希望 first-child 的 border-top 为 none,也无法做到:
:host(:first-child) { border-top : none ; } |
参考资料:
https://developers.google.com/web/fundamentals/web-components/shadowdom#host
https://gist.github.com/praveenpuglia/0832da687ed5a5d7a0907046c9ef1813#terminologies-1
http://robdodson.me/shadow-dom-css-cheat-sheet/