为什么在 ForeignObjectMarkup 中使用 body 元素？

[BiosSun]

我看到在下面这段 Markup 的实现代码中，是在 foreignObject 里创建了一个 body 子元素，但 body 应该会受到页面全局样式的影响，所以为什么要使用 body 呢？

X6/packages/x6/src/view/markup.ts

Lines 346 to 380 in cae8625

	export namespace Markup {
	export function getForeignObjectMarkup(bare = false): Markup.JSONMarkup {
	return {
	tagName: 'foreignObject',
	selector: 'fo',
	children: [
	{
	ns: Dom.ns.xhtml,
	tagName: 'body',
	selector: 'foBody',
	attrs: {
	xmlns: Dom.ns.xhtml,
	},
	style: {
	width: '100%',
	height: '100%',
	background: 'transparent',
	},
	children: bare
	? []
	: [
	{
	tagName: 'div',
	selector: 'foContent',
	style: {
	width: '100%',
	height: '100%',
	},
	},
	],
	},
	],
	}
	}
	}

我有看到这个问题：#1282 ，但我仍想知道既然会有这些问题，那么为什么还要使用 body 呢？

[NewByVector]

可以将 foreighObject 类比 html 文档，里面的根元素就是 body。

[BiosSun]

可以这样类比吗？

我刚翻了一下 foreighObject 的规范说明，规范中关于其子元素的要求有这么一句：

那么按这里的意思，foreighObject 的直接子元素是否也可以改用一个 div 即可？

[NewByVector]

div 也是可以的，不过 div 也会有样式影响问题，在大多数实践过程中，body 样式影响基本上不会出现。

[BiosSun]

但 body 上的可能会有一些特殊样式，比如对于一些应用型的程序，可能会添加如下样式：

body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

而 div 则通常会干净许多，很少有人敢在 div 上设置这些样式。

[lloydzhou]

@BiosSun
#3487
https://github.com/lloydzhou/x6-html-shape
这里有一个实验性质的不依赖foreignObject实现自定义节点的实现

有点类似butterfly的逻辑
用HTML实现自定义节点内部逻辑，用SVG实现节点边/节点边框/链接桩等其他元素。