将按钮附加到现有的shadowroot元素不正确

问题描述

var shadow = document.getElementById(
        "3rd-party-div"
      ).shadowRoot; 
      
let style = document.createElement("style");
      style.textContent = `
      .custom_button{
    
    padding: 10px;
    display:block;
    float:left;
    text-align:center;
}
`
shadow.appendChild(style);
let customButton = document.createElement("button");
customButton.setAttribute("class","custom_button");
customButton.innerHTML = "Back to Overview";

我的HTML页面中有一个shadowRoot，我正在通过这段代码进行访问

var shadow = document.getElementById(
        "3rd-party-div"
      ).shadowRoot;

现在，我想创建一个按钮并将其附加到此shadowroot。下面的代码-

      let customButton = document.createElement("button");
      customButton.setAttribute("class","custom_button");
      customButton.innerHTML = "Back to Overview";

然后使用此代码shadow.appendChild(customButton);将按钮添加到阴影元素我有css样式，也可以附加到shadowroot。

现在我的按钮即将出现在页面中，但它在我的shadowroot div下方。无论如何，有没有将其保留为我的shadow div本身的一部分？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

html javascript shadow-dom