自定义组件这个“普通”节点不普通！
文档中对于自定义组件节点的描述只在这里看到一些，如下图
在没有任何外部css属性作用的情况下，这个"普通节点"是一个行盒
实际情况下，由于内部外层节点可能是多种盒模型情况，那么这个普通节点的实际效果会是如何呢？(忽然间忘记了行盒父元素包裹块级子元素的效果了，还是我没这么做过？)
下面来测试下这个"普通"节点在内部不同盒模型情况下的实际效果
- 当内部是文本节点的时候
我是文本节点
页面效果
- 当内部是块级元素节点时候
我是块级元素
页面效果
- 当内部是行块盒元素节点时候
我是行块盒元素
页面效果
小结: 内部不同的盒模型反馈到外部这个自定义组件节点的时候，这个"普通"节点的表现效果基本符合内部元素要实现的效果。这可能是官方把这个普通节点定义为inline的初衷吧。
但是有些时候，内部节点可能需要一些外部节点的信息来配合自己的效果。比如width:“50%”;height:“30%” 等等…那么这时候要如何写自定义组件呢？
- 下面测试内部width和height 百分比的情况
先把外部page和页面，包括自定义组件外层元素的height设置为100%;
再设置自定义组件内部元素如下
我是块盒，我的宽高随父级改变
内部节点页面效果
自定义节点页面效果
我们把自定义组件所在页面的父级组件 宽度和高度设置改变
内部节点页面效果
自定义节点页面效果
小结 不改变自定义组件inline模型的情况下,内部节点的width和height百分比是对应的自定义组件节点的父级节点。自定义组件的宽高来自内部元素大小(小程序没有margin的视图效果(就是你看感觉不到margin),但是认margin效果真实存在,有时候不小心反应不过来会怀疑人生,这里的内部元素因为是块盒会有自动margin撑满)
之所以写这些废话，就是在写自定义组件的时候，为了考虑多种情况(比如组件可能作为块盒使用也可能作为行盒还可能是定位元素等等),此时这个官方所谓的"普通"节点会使我蒙逼，可能是我道行不深吧。看到官方也给出了通过虚拟节点把这个节点干掉的方案，但是也暴漏了更多问题(比如https://developers.weixin.qq.com/community/develop/doc/0006c44dcb47604d0e8b6147051400)。慢慢总结吧。这里只做个提醒、抛砖引玉，受益的小伙伴给点个赞，没人点赞都不爱写总结了！！
http://github.com/users/nqvki4953051/projects/1830
https://github.com/users/nqvki4953051/projects/1830%3Ffullscreen%3Dtrue
https://github.com/users/fkab88459662/projects/1833
强力驱动