bootstrap Support modals embedded in Web Components

kmb7vmvb  于 5个月前  发布在  Bootstrap
关注(0)|答案(1)|浏览(61)

先决条件

建议

模态类建议模态元素是 document.body 的一部分,但它可以是 Web Component(因此是 Shadow DOM)的一部分。我的建议:在 Modal 组件中添加一个选项,以便能够定义其根元素。当然,它的默认值将是 document.body

动机和背景

在当前的 Bootstrap v5.2 版本中,当显示一个模态框时,会使用以下代码:

if (!document.body.contains(this._element)) {
  document.body.append(this._element)
}

如果模态元素( this._element )是 Shadow DOM 的一部分,即使它附加到当前文档上, document.body.contains(this._element) 始终返回 false。
然后, document.body.append(this._element) 将把模态元素从 Shadow DOM 移动到 body 元素!这会产生多个问题:请参阅 this jsfiddle 以获取一些示例。
如果开发者可以指定 Shadow root 作为选项,那么条件将是:

if (!root.contains(this._element)) {
  root.append(this._element)
}

这样就可以正常工作了。

uz75evzq

uz75evzq1#

JulienChebance,你能用你的想法打开一个PR吗?(我不确定背景和滚动条的行为)

相关问题