重命名 var 文档.在 shadow root 中运行 Js [英] Rename var document. Run Js inside shadow root

问题描述

我在网页中嵌入了一些 HTML 内容，我希望它与外部 CSS 隔离.我的用户能够动态创建 HTML 内容，这些页面可以包含一些简单的 JS.我一直在尝试在影子根中运行这些 JS.由于 JS 是在用户创建页面时动态创建的，因此我需要一种方法来运行 shadowroot 中的代码.我添加的内容如下:

I am embedding some HTML content inside a webpage and I want it to be isolated from outside CSS. My users are able to create HTML content dynamically and these pages can contain some simple JS. I've been trying to run these JS inside a shadow root. Since the JS is created dynamicaly when the user creates the page I need a way to make it possible to run the code inside the shadowroot. I'm adding content as follows:

const header = document.createElement('header');
const shadowRoot = document.createElement('body')
shadowRoot.innerHTML = pageContent


var script = document.createElement('script')
script.textContent = `document.querySelectorAll('#ii0b7a'); document.createElement(........`  
shadowRoot.appendChild(script)

header.attachShadow({
 mode: 'open'
}).appendChild(shadowRoot)

document.getElementById('div-box-one').appendChild(header)

到目前为止一切顺利，但代码无法正确运行，因为脚本正在访问文档元素而不是 shadowRoot.所以我应该先访问shadowroot，然后才能访问里面的元素.为此，我将 js 代码包装在一个函数中，并像这样重命名文档变量:

So far so good, but the code won't run correctly, because the script is accessing the document elements and not the shadowRoot. So I should first access shadowroot and then I'll be able to access the elements inside it. To do so, i'm wrapping the js code inside a function and renaming document variable like this:

(function(document) {
    // code here
}(document.getElementById('shadow_root').shadowRoot));

但是这种方法不能正常工作，因为在某些情况下我必须使用函数document.createElement"；然后会抛出错误.

But this approach is not working correctly, because in some case I have to use the function "document.createElement" which will then throw an error.

我的问题是:如何仅在需要时重命名文档变量.例如

My question is: How can I rename document variable only when needed. For example

document.querySelectorAll('#') = document.getElementById('shadow_root').shadowRoot.querySelectorAll('#')

document.createElement = document.createElement

我知道在 shadowRoot 中使用库几乎是不可能的，而 iframe 是另一种解决方案，但 iframe 给我带来了其他问题.(shadow-dom 库)

I know it is almost impossible to use libraries inside shadowRoot and iframe is another solution, but iframe brings me other problems with it. (shadow-dom library)

是否有可能以某种方式重命名文档变量来实现我想要的?

Is it possible to achieve what I want renaming somehow the document variable?

推荐答案

所以我想出了以下解决方案:

So I've came up with the following solution:

function documentParse() {
   var element = document.getElementById('shadow_root').shadowRoot
   element.createElement = function createElement(type) {
      return document.createElement(type)
   }
   element.head = document.head
   return element
}

script.textContent = `(function(document) {
 //script source text
}(documentParse()));`

....

以这种方式包装脚本将使对文档的每次搜索都进入 shadowroot dom 内的元素范围.

Wrapping the script in this way will bring every search on document to the scope of elements inside the shadowroot dom.

这篇关于重命名 var 文档.在 shadow root 中运行 Js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！