收藏
回答

希望自定义组件可以支持 :host([attr]) 等选择器

问题模块 框架类型 终端类型 微信版本 基础库版本
框架 小程序 工具 Latest 1.9.91

* 你希望有什么能力?


希望自定义组件可以支持 :host([attr])、:host(:status) 等选择器语法。



* 你需要这个能力的场景是 ?


我尝试着将 WeUI 封装成自定义组件,比如以下这两段代码封装并使用了 weui-button 组件 —— 其中我希望当 weui-button 的 size 属性为 mini 的时候,这个自定义组件的 display 为 inline-block:


组件实现:https://github.com/imyelo/weui.mina/blob/14927c7212b8eb2952e85d02bf5bafe391ceaa8b/src/button.mina#L53-L58


:host([size=mini]) {
 display: inline-block;
}


使用示例:https://github.com/imyelo/weui.mina/blob/14927c7212b8eb2952e85d02bf5bafe391ceaa8b/storybook/src/pages/button.mina#L32-L34


<weui-button type="primary" size="mini"> 按钮 </weui-button>


但目前在最新基础库版本 1.9.91 中无效(具体表现为括号内的选择器被忽视,并直接覆盖了无附加选择器的 :host 的样式,即所有的 weui-button host 都变成了 display: inline-block)。


此外例如在实现列表 Cell 组件时,希望 first-child 的 border-top 为 none,也无法做到:


https://github.com/imyelo/weui.mina/blob/14927c7212b8eb2952e85d02bf5bafe391ceaa8b/src/cell.mina#L45-L50


: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/

最后一次编辑于  2018-03-16
回答关注问题邀请回答
收藏