将 Element 从 Shadow DOM 中获取出来或使用主站点的样式-解网

问：

我正在一个使用 Polymer 的项目中工作（仍然在 1.7 上，我们将使用不同的技术而不是升级......），我应该检查一下让它与 DynamicYield 一起工作的可能性，DynamicYield 是一个个性化平台，通过 ShadowDOM 将个性化项目或推荐的 HTML 注入到一个人的页面中。

shadowDOM 的问题在于，当然，您网站的样式丢失了，这意味着您必须注入所有样式，从而将它们维护在 DynamicYield 中。

所以我的想法是把注入的内容从阴影DOM中拿出来。我试着输入类似的东西

document.getElementById('rec').innerHTML = document.getElementById('rec').shadowRoot.innerHTML; 
document.getElementById('rec').shadowRoot.innerHTML = '';

...进入 JS 控制台，但是，尽管 DOM 现在看起来不错，但内容从可见站点中消失了。（也许这是聚合物问题？

您有什么想法，我可以做些什么来在注入的代码中使用主要站点样式吗？不幸的是，DynamicYield 文档没有提到任何阻止它使用 ShadowDOM 的设置（除了取消设置SPA_FLOW标志，这在我们的例子中是不可行的）。

编辑：添加一个小片段来显示问题。使用 inspect 查看 innerHTML 是否在 div#rec 中但不可见。

//Simulating DynamicYield adding code. Second headline/Shadow DOM will NOT be green.
const el = document.getElementById('rec');
const shadowRoot = el.attachShadow({mode: 'open'});
shadowRoot.innerHTML = '<h1>I belong to Shadow DOM</h1>';
const container = document.querySelector('body');
container.appendChild(el);
//Trying to get Code out of Shadow DOM
el.innerHTML = el.shadowRoot.innerHTML; 
el.shadowRoot.innerHTML = '';

h1 {
          color: green;
      }

<h1>I belong to Light DOM</h1>
<div id="rec"></div>

javascript css 聚合物 1.0 shadow-dom

//Simulating DynamicYield adding code. Second headline/Shadow DOM will NOT be green.
const el = document.getElementById('rec');
const shadowRoot = el.attachShadow({mode: 'open'});
shadowRoot.innerHTML = '<h1>I belong to Shadow DOM</h1>';
const container = document.querySelector('body');
container.appendChild(el);
//Trying to get Code out of Shadow DOM
//WORKAROUND: Put HTML in another div that never had a shadow DOM attached.
const el2 = document.getElementById('rec2');
el2.innerHTML = el.shadowRoot.innerHTML; 
el.shadowRoot.innerHTML = '';

h1 {
          color: green;
      }

<h1>I belong to Light DOM</h1>
<div id="rec"></div>
<div id="rec2"></div>

将 Element 从 Shadow DOM 中获取出来或使用主站点的样式

Get Element out of Shadow DOM or use styles of main site

评论

评论