修改allowList以在Bootstrap Popover中支持table、tr、td元素问题

问题场景 #

想要在Bootstrap Popover中展示表格，已将table、tr、td元素添加到allowList，但Popover仍显示空白（Popover本身功能正常，仅添加表格时异常），推测是allowList配置方式有误。

原初始化代码：

var myDefaultAllowList = bootstrap.Popover.Default.allowList;
//to allow elements and attributes on elements
//myDefaultAllowList.input = ['type', 'checked']; //extra allow example
myDefaultAllowList.table = [];
myDefaultAllowList.tr = [];
myDefaultAllowList.td = [];

let popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
let popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl, { allowList: myDefaultAllowList, html: true });
});

示例弹窗HTML：

<a data-bs-toggle="popover" data-bs-placement="right" data-bs-trigger="hover" data-bs-content="<table><tr><td>testing</td></tr></table>">popover example</a>

问题原因 #

直接引用并修改bootstrap.Popover.Default.allowList会导致配置异常，因为这是对默认配置对象的引用赋值，而非创建独立的自定义规则，可能引发配置未正确生效的问题。

修复方案 #

通过深拷贝默认allowList创建自定义规则，再添加表格相关元素，确保配置独立且生效：

修正后的初始化代码 #

// 深拷贝默认allowList，避免修改原配置
const myAllowList = JSON.parse(JSON.stringify(bootstrap.Popover.Default.allowList));

// 添加表格相关元素（允许这些元素，无额外属性限制则传空数组）
myAllowList.table = [];
myAllowList.tr = [];
myAllowList.td = [];

// 初始化Popover
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => {
    return new bootstrap.Popover(popoverTriggerEl, {
        allowList: myAllowList,
        html: true
    });
});

关键说明 #

• 使用JSON.parse(JSON.stringify())深拷贝默认配置，保证自定义规则独立于默认配置
• 确保table、tr、td都被添加到myAllowList中
• 初始化时必须开启html: true，否则Popover会将HTML内容转义为纯文本

内容的提问来源于stack exchange，提问作者user756659