Question

我一直试图弄清楚这几个小时无济于事。

基本上，我正在制作一个Chrome扩展程序，可以将大量HTML加载到页面中。为了防止出现很多问题，我想使用Shadow DOM进行封装。 CSS封装很好，过了一段时间我终于设法将JS加载到DOM中。

问题是，我包含2个JS文件：

vendor.js（我使用的JS库，编译成单个文件。值得注意的库：jQuery和Angular）
extension.js - 我自己的代码编译成单个文件（做一些内容，bootstraps Angular并定义控制器/指令/等）

问题是，在加载vendor.js文件后，我无法访问它在其他脚本中应用的内容。

对于我的生活，我无法弄清楚它登录的上下文并将其用作注入类的“窗口”元素。

这是我的Shadow DOM初始加载脚本：

// HACK: we need to "bleed" font-faces to outside the shadow dom because of a bug in chrome
document.querySelector('head').innerHTML +=
  '<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />'

let rootElHtml = `
    <div id="cls-root">
      <template id="cls-template">
      </template>
    </div>
  `

document.body.innerHTML += rootElHtml
let rootEl = document.querySelector('#cls-root'),
  templateEl = rootEl.querySelector('template'),
  shadow = rootEl.attachShadow({
    mode: 'open'
  })

let cssLinks = [
  chrome.extension.getURL('dist/css/vendor.css'),
  chrome.extension.getURL('dist/css/extension.css'),
  '//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'
].map(p => `<link rel="stylesheet" href="${p}" />`).join("\n")

let jsLinks = [
  chrome.extension.getURL('dist/js/vendor.js'),
  chrome.extension.getURL('dist/js/extension.js'),
].map(p => `<script src="${p}" type="text/javascript"></script>`).join("\n")

// inject css/js into template content
let templateNodeContents = document.createElement('div')
templateNodeContents.innerHTML = [cssLinks, jsLinks].join("\n")
for (let node of templateNodeContents.childNodes)
  templateEl.content.appendChild(node)

// load remote HTML template and apply into shadow root template
fetch(chrome.extension.getURL('dist/templates/root.html')).then((data) => {
  data.text().then((body) => {
    let bodyContainer = document.createElement('div')

    shadow.appendChild(document.importNode(templateEl.content, true))
    bodyContainer.innerHTML = body
    shadow.appendChild(bodyContainer.childNodes[0])
  })
})

window._clsExt = shadow

这是我试图引导Angular：

const shadow = document.querySelector('#cls-root').shadowRoot

shadow.APP_NAME = 'myApp'
shadow.app = angular.module(APP_NAME, ['ngStorage'])
  .config(['$localStorageProvider', '$httpProvider',
    ($localStorageProvider, $httpProvider) => {
      $localStorageProvider.setKeyPrefix('myApp');
      $httpProvider.interceptors.push(apiInterceptor);
    }
  ])
shadow.app.constant('APP_ENV', APP_SETTINGS.app_env)
shadow.app.constant('API_BASE', APP_SETTINGS.api_base_url)
angular.bootstrap(shadow, [APP_NAME])

但是，我一直遇到有关角度的错误：

extension.js:21 Uncaught ReferenceError: angular is not defined
    at extension.js:21

我尝试在shadow元素的属性内部以及其他window变体内部进行查看，并尝试在其中查找文档。

如果不强行将文件组合在一起，这是否可行？我希望保持这种分离。

Answer 1

我看到您将JS文件添加到Shadow DOM范围中。由于在Shadow dom中访问元素不同，并且库在其中不起作用，因此无法使用。

当我说访问DOM时不同

$(#id) //the usual way to access a id using jQuery
parentofShadowtree.shadowRoot.querySelector('#id') //to select a element inside shadow DOM

正如您所看到的，在Shadow DOM中访问DOM元素是不同的，通常的JS库文件无法访问这些元素，并且在这里不起作用

如果我错了，请纠正我。

在Shadow DOM中使用JS库

1 个答案: