Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

给组件设置 :host 属性的提议 #56

Open
qiu8310 opened this issue Mar 13, 2018 · 2 comments
Open

给组件设置 :host 属性的提议 #56

qiu8310 opened this issue Mar 13, 2018 · 2 comments

Comments

@qiu8310
Copy link
Contributor

qiu8310 commented Mar 13, 2018

shadow dom 支持使用 :host 来设置外层标签的样式,我看到你每个示例下面都有个 wxss 文件,而文件的内容都一样,都是:

/**index.wxss**/
ec-canvas {
  width: 100%;
  height: 100%;
}

其实微信支持在你的组件中设置 :host 的,如在 ec-canvas.wxss 中添加这样的代码

:host {
  display: block;
  width: 100%;
  height: 100%;
}

然后你所有示例的的 index.wxss 都可以删除了,而且我觉得这样设置也符合用户的习惯吧!

微信官方关于 :host 的使用在此: https://mp.weixin.qq.com/debug/wxadoc/dev/framework/custom-component/wxml-wxss.html#%E7%BB%84%E4%BB%B6%E6%A0%B7%E5%BC%8F

不过有个问题是 :host 设置的样式要比外层的标签选择器的优先级高,比外层的 class 选择器的优先级低;感觉这应该是微信的 bug。

shadow dom 的官方定义是 :host 指定的样式优先级是最低的: https://developers.google.com/web/fundamentals/web-components/shadowdom#host

@qiu8310
Copy link
Contributor Author

qiu8310 commented Mar 13, 2018

没有提 pr ,感觉你不一定会接受

@Ovilia
Copy link
Member

Ovilia commented Mar 14, 2018

等我有时间研究下哈~ 当然,PR 是坠吼的!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants