# 每个布局组件都对应一个DOM节点吗

答案显然是否定的,那么有没有仔细探究一下,哪些场景不是对应一个DOM呢?

举个例子: 如下布局有什么问题?

```javascript
const render = () => {

    return [
        {
            el: {
                type: "bi.vertical",
                items: [
                    {
                        type: "bi.label",
                        cls: "bi-card",
                        text: "card1"
                    }
                ]
            },
        }, {
            type: "bi.absolute",
            invisible: () => !this.model.tipVisible,
            items: [
                {
                    el: {
                        type: "bi.icon_label",
                        title: "tip"
                    },
                    right: 0, top: 0
                }
            ]
        }
    ];
};
```

![示例](../images/54.png)

观察DOM结构可以发现,`bi.vertical`和`bi.absolute`布局组件共享了一个DOM,且最终布局效果不会产生相互影响.

但是共享一个DOM需要额外注意一点,设置invisible属性时候需要知晓副作用.

如上示例,`bi.absolute`布局 invisible为true的时候,`bi.vertical`也会消失不见.
原因也很简单: invisible是通过对DOM设置`display:none`样式,自然导致了这种结果. 解决方式也很简单,将invisible控制放到`bi.absolute`组件内部元素


另一个示例,web组件中常用的`bi.iframe`组件

如下示例: iframe可以正常渲染吗?

```javascript
class IframeWidget extends BI.Widget {
    props = {
        baseCls: "test-frame"
    };

    render() {
        return {
            type: "bi.iframe",
            src: "http://www.bing.com"
        };
    }
}
```

![示例](../images/55.png)

答案是不行的,这是为什么呢?这是因为`bi.iframe`组件和当前IframeWidget组件共用一个DOM,父组件控制的node类型为div,覆盖掉了`bi.iframe`设定的iframe类型

同理bi.image组件也有类似场景

解决这类问题也很容易,给`bi.iframe`一个专用的DOM即可

```javascript
class IframeWidget extends BI.Widget {
    props = {
        baseCls: "test-frame"
    };

    render() {
        return {
            type: "bi.adaptive",
            items: [
                {
                    type: "bi.iframe",
                    src: "http://www.bing.com",
                    height: "100%",
                    width: "100%",
                }
            ]
        };
    }
}
```