静态引入SimpleBar可正常运行，JS动态添加配置为何失效？

• SimpleBar的自动初始化逻辑仅会在脚本加载完成且DOMContentLoaded事件触发时，扫描当前页面已存在的带data-simplebar属性的元素完成初始化。静态引入资源的场景下，JS加载时DOM还未完成解析，DOMContentLoaded事件尚未触发，因此自动扫描逻辑可以正常执行。
• 动态加载资源的场景下，你调用函数执行逻辑时页面DOM已经完成解析，DOMContentLoaded事件早已触发，就算你提前给目标元素添加了data-simplebar属性，SimpleBar加载完成后也不会再执行自动扫描逻辑，因此不会初始化对应元素。

不要依赖SimpleBar的自动扫描机制，等SimpleBar脚本加载完成后手动初始化目标元素即可，修正后的代码如下：

function myFunction() {
  const targetDiv = document.getElementsByTagName("div")[0];
  // 加载样式资源
  const cssLink = document.createElement('link');
  cssLink.setAttribute("rel", "stylesheet");
  cssLink.setAttribute("href", "https://unpkg.com/simplebar@latest/dist/simplebar.min.css");
  document.head.appendChild(cssLink);
  // 加载脚本资源，加载完成后手动初始化
  const scriptEl = document.createElement('script');
  scriptEl.setAttribute("src", "https://unpkg.com/simplebar@latest/dist/simplebar.js");
  scriptEl.onload = function() {
    // 直接调用构造函数初始化目标元素，无需提前添加data-simplebar属性
    new SimpleBar(targetDiv);
  }
  document.body.appendChild(scriptEl);
}
myFunction();

如果确实需要保留通过data-simplebar属性声明的方式，可以在SimpleBar加载完成后调用SimpleBar.init()手动触发全页面扫描，或者调用SimpleBar.initDOMMutatations()开启DOM变化监听，后续新增的带对应属性的元素也会自动初始化。

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