问题模块 框架类型 终端类型 微信版本 基础库版本
框架 微信小程序 工具 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


按钮



但目前在最新基础库版本 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/