如题，假如我有一个spinner组件，它在不同的页面里，显示的位置是不同的，因此我需要为每个spinner设置不同的class。再假设我有一个middle样式，将一个元素显示在页面正中。现在我希望在当前这个页面里，spinner组件显示在页面正中。
按照目前的小程序能力，我能想到的是以下几种实现方式。一种是在spinner外部包裹一个view，添加自定义class：
<view class="middle"> <spinner></spinner></view> |
另一种是为spinner定义externalClasses，然后从外部把“middle”这个class传给spinner组件。
最后一种是在spinner内部设置host选择器样式，但这会造成组件与自己的显示位置紧耦合，不利于修改。
可否实现如下功能：在spinner组件上直接设置class属性，可以将这些class直接挂在spinner组件的根元素上
即：
<spinner class="middle"></spinner> |
---
补充：
之所以有这个需求，是因为我之前用vue时，vue支持此功能。但是vue强制要求每个组件只有一个根元素，而小程序并无此要求。
那么请问有没有什么优雅的方式实现我的需求？
### 设置根元素样式
#### :host
在组件内部可以通过 `:host` 选择符，这个的好处是不需要在整个组件wxml外面单独用一个 `<view class="root-class">` 包装：
```CSS
:host {
...
}
```
#### 组件名
在页面内通过组件标签名为组件设置样式：
```CSS
my-component: {
...
}
```
可参看文档 “外部样式类”
https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html