标签: shadow-dom

我想在自定义元素内动态创建一个 CodeMirror 实例，并将其存在于元素的 Shadow DOM 内。例如：

<code-mirror>foo</code-mirror>
<script>
window.customElements.define('code-mirror', class extends HTMLElement {
    constructor() {
        super();
        let shadowRoot = this.attachShadow({mode: 'open'});
    }

    connectedCallback() {
        this.cm = CodeMirror(this.shadowRoot, {lineNumbers: true});
    }
});
</script>

这“有效”，但布局完全错误。左边距设置为窗口的宽度，行号显示不正确，并且选择逻辑垂直偏离了几行。

这是一个演示布局问题的 jsfiddle：链接

建议？

我们有主要的大型应用程序，并将使用不同的库（Angular、React 等）创建单独的小型应用程序（微服务），并将它们编译成 Web 组件以便在任何地方使用它们。主应用程序有一些库（例如 underscore.js），我们的一些组件使用相同的库（例如 lodash.js），在这种情况下，我们在主应用程序中使用 Web 组件时会看到很多冲突。您对如何隔离 Web 组件库以及它们可以在隔离模式下工作有什么想法吗？我们也使用了 ShadowDOM，但没有成功。

据我所知，不推荐使用 /deep 选择器来选择影子 dom 子项。所以我正在寻找另一种解决方案。

CSS 作用域旨在为升序选择器提供解决方案，但不为降序选择器提供解决方案。

鉴于这个 dom ：

<script>
    $('.child').addClass('reached');
</script>
<div id="parent">
    #shadow-root
        <div class="child"></div>
    /shadow-root
</div>

如何在脚本中编写选择器以到达 .child 元素？

感谢您的帮助

我当前的项目使用 Web 组件（自定义元素和 Shadow DOM），这使我能够封装复杂的逻辑和样式，远离 Light DOM。

不幸的是，我现在遇到了一个障碍，我需要能够随意切换元素，而无需解除绑定和重新绑定事件处理程序的麻烦。

对我来说，这听起来像是事件委托的工作，因此我尝试向 Light DOM 中的父节点添加一个事件侦听器，希望该事件能够从 Shadow DOM 中冒出。

这似乎违背了 Shadow DOM 的封装，并且 event.target 始终是 ShadowRoot 而不是子级。

在这种情况下我可以做些什么来允许经典事件委托吗？下面的代码片段显示了问题。我希望能够单击内部 DIV 并在单击事件处理程序中处理单击，但 event.target 始终是 custom-el

/* jshint esversion: 6 */

customElements.define('custom-el', class extends HTMLElement {

	constructor() {
		super();

		this._shadowRoot = this.attachShadow({
			mode: 'open'
		});

		const oInnerDiv = document.createElement('div');
		oInnerDiv.classList.add('inner');
    oInnerDiv.style.border = '2px solid blue';
    oInnerDiv.style.padding = '3rem';
		this._shadowRoot.appendChild(oInnerDiv);
	}

});

document.addEventListener('click', oEvent => {
	document.getElementById('result').innerText = oEvent.target.tagName;
}, true);

html {
	box-sizing: border-box;
}

*,
*::before, …

我有一个创建的影子根mode: closed

<session-expiration-popup>
  #shadow root (closed)
  <div class="custom-element-root">
    something
  </div>
</session-expiration-popup>

有什么办法可以querySelect从这个影子根源得到一些东西吗？

我试过

const el = document.querySelector('session-expiration-popup')
el.shadowRoot.querySelector(".custom-element-root");

但是，它不起作用，因为shawRootparam 是null用于mode: close

另外，我尝试过el.attachShadow({ mode: "open" })，但这也是导致异常的错误方式（el 元素存在影子根）。

你还有其他建议吗？

我正在使用 Selenium (Python) 来自动化网页。我正在尝试从#shadow-root（用户代理）下的输入字段获取文本。我使用的Xpath：

driver.find_element_by_xpath("**//*/p-calendar/span/input**").text

没有返回任何东西。附上我的 DOM 元素的屏幕截图。要求：从影子根获取文本：01:01

对于这个问题我还没有看到满意的答案。这基本上是这个问题的重复，但它关闭不当并且给出的答案不充分。

我提出了自己的解决方案，我将在下面发布。

这对于网页抓取很有用，或者在我的例子中，在处理自定义元素的 javascript 库上运行测试。我确保它生成我想要的输出，然后使用此函数来抓取给定测试输出的 HTML，并使用复制的 HTML 作为预期输出，以便将来与测试进行比较。

我正在寻找一种方法来从DOM访问Polymer自定义元素的属性,或者将数据从Polymer.register发送到DOM.

下面这个非常简单的元素采用两个值并将它们相乘,将结果放在其result属性中.

如何从外部访问此结果？

<element attributes='value times result' name='value-box'>
  <template>
    <p>{{result}}</p>
  </template>

  <script>
    Polymer.register(this, {
      ready: function() {
        if (this.value != null && this.times != null) {
          this.result = this.value * this.times;
        }
      }
    });
  </script>
</element>

聚合物中有类似angularjs指令的transclude属性吗？什么允许我将一些元素包含在模板中的特定位置？

我想实现以下内容:

<my-header title="My title">
    <my-header-item name="Item 1"></my-header-item>
    <my-header-item name="Item 2"></my-header-item>
</my-header>

可能表达的意思是:

<h1>My title</h1> <!-- "My title" given by my-header's title attribute -->
<ul>
    <li>Item 1 <!-- given by my-header-item -->
    <li>Item 2
</ul>

我不确定这是否是聚合物的任务,或者这是否是使用聚合物的典型方法.我问,因为我开始喜欢聚合物,我想保持惯用思维.

我正在编写一个Chrome扩展程序，该扩展程序可以在页面加载或更改时修改元素属性。

我使用突变观察者来做到这一点。但是，在加载/更改shadow-dom（即嵌入式Twitter帖子）时，不会调用观察者的处理程序。

有没有一种方法可以在阴影域加载/更改时获取事件，或将变异观察者挂钩到该事件？

谢谢！