标签: shadow-dom

使用javascript/jquery访问shadow DOM属性(聚合物)？

我目前正在使用聚合物的core-scaffold&co.创建带有内容区域的标题/侧边栏.我目前遇到的问题是我无法访问内容元素的某些属性,例如scrollTop.(因为我需要访问的实际scrollTop属性是在shadow DOM中定义的.)

这与我正在使用的lazyload jquery插件冲突.该插件正在检查window.scrollTop但是更改插件以检查我的内容的scrollTop(滚动而不是窗口)将不会产生任何影响,因为scrollTop在shadow DOM中"隐藏".

有没有办法访问阴影DOM元素？我唯一能找到的就是访问你自己用createShadowroot(或其他任何调用的东西)创建的影子DOM对象,但我似乎无法找到有关如何访问已存在/已创建的影子根的任何参考.

示例代码如下

<core-scaffold>
  <core-header-panel navigation flex mode="seamed">

    <core-toolbar>
    <!--fixed toolbar-->
    </core-toolbar>

    <core-menu theme="core-light-theme">
      <core-item icon="settings" label="item1"></core-item>
      <core-item icon="settings" label="item2"></core-item>
    </core-menu>

  </core-header-panel>

  <div tool>
  <!--fixed header-->
  </div>

  <div id="content">

  <!-- get scrollTop of content? -->
  </div>
</core-scaffold>

Run Code Online (Sandbox Code Playgroud)

javascript jquery shadow-dom polymer

And*_*ter

lucky-day

8
推荐指数

1
解决办法

6359
查看次数

在Android 4.4 Webview中使用shadow-dom(Polymer)

我实际上正在使用自定义Polymer元素(基于web组件和shadow-dom)构建Web应用程序,但我遇到了一个严重的问题.

我希望这个应用程序在Android 4.4 WebView上运行,但是当我在WebView上测试应用程序时,我遇到了shadow-dom的一些问题,尽管它在Chrome(Android和桌面)上运行得非常好.当我尝试从CSS(使用:: shadow或/ deep /)或从纯js访问shadowRoot元素时,会发生此问题.

这是我的问题的简单说明:

<!-- custom-elt.html -->
<link rel="import" href="../bower_components/polymer/polymer.html">

<polymer-element name="custom-elt">

    <template>
        <div id="elt">some content</div>
    </template>

    <script>
        Polymer('custom-elt',{
            getElt: function(){
                return this.shadowRoot.getElementById('elt');
            }
        });
    </script>

 </polymer-element>

Run Code Online (Sandbox Code Playgroud)

// script.js
window.addEventListener('polymer-ready',function(){
    var e = document.getElementsByTagName('custom-elt')[0];
    alert(e.getElt().innerHTML);
});

Run Code Online (Sandbox Code Playgroud)

适用于Chrome,但不适用于WebView.根据caniuse.com的说法,shadow-dom是由Android 4.4浏览器(WebView使用的吗？)和'webkit'前缀(http://caniuse.com/#feat=shadowdom)支持的,但我没有'找到一种方法将它与前缀一起使用.

有解决方案吗

谢谢

巴蒂斯特

javascript android webview web-component shadow-dom

Bap*_* LG

2014 08-27

8
推荐指数

1
解决办法

790
查看次数

确定用户是否在阴影dom外部单击

我正在尝试实现一个下拉菜单,你可以点击外面关闭.下拉列表是自定义日期输入的一部分,并封装在输入的shadow DOM中.

我想写一些类似的东西:

window.addEventListener('mousedown', function (evt) {
  if (!componentNode.contains(evt.target)) {
    closeDropdown();
  }
});

Run Code Online (Sandbox Code Playgroud)

然而,该事件被重新定向,所以evt.target是永远的元素之外.事件在到达窗口之前会有多个阴影边界,因此似乎无法真正了解用户是否在组件内部单击.

注意:我没有在任何地方使用聚合物 - 我需要一个适用于通用阴影DOM的答案,而不是聚合物特定的黑客.

javascript shadow-dom

ova*_*gle

lucky-day

8
推荐指数

2
解决办法

868
查看次数

Polymer的shady DOM与shadow DOM有什么区别？

我在使用shadow DOM作为其中一个Web组件(纸张步进器)时遇到问题,而且需要使用阴影DOM.我不确定区别是什么,为什么会这样.

shadow-dom polymer polymer-1.0 shady-dom

Jai*_*ime

lucky-day

8
推荐指数

1
解决办法

3740
查看次数

嵌套元素(Web组件)无法获取其模板

我使用带有两个自定义元素(v1)的Web组件做了一个简单的例子,其中一个嵌套在另一个元素中.index.html的:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Example</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="import" href="app-container.html">
</head>
<body>
  <app-container></app-container>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

APP-container.html:

<link rel="import" href="toolbar.html">
<template id="app-container">
  <app-toolbar></app-toolbar>
</template>
<script>
  customElements.define('app-container', class extends HTMLElement {
    constructor() {
      super();
      let shadowRoot = this.attachShadow({ mode: 'open' });
      const content = document.currentScript.ownerDocument.querySelector('#app-container').content;
      shadowRoot.appendChild(content.cloneNode(true));
    }
  });
</script>

Run Code Online (Sandbox Code Playgroud)

toolbar.html:

<template id="app-toolbar">
  <p>Ok!</p>
</template>
<script>
  customElements.define('app-toolbar', class extends HTMLElement {
    constructor() {
      super();
      let shadowRoot = this.attachShadow({ mode: 'open' });
      const content = document.currentScript.ownerDocument.querySelector('#app-toolbar').content; …

Run Code Online (Sandbox Code Playgroud)

javascript web-component shadow-dom html5-template html-imports

jam*_*bay

2017 01-04

8
推荐指数

1
解决办法

1042
查看次数

Shadow DOM 和 ReactJS

我在我的应用程序中使用网络组件。在 Web 组件中，我需要插入一个 React 组件。Web 组件有 Shadow DOM。当我尝试使用以下方式渲染反应组件时，出现错误。

comp = React.createElement(ReactElem, {
    config: config,
    onRender: handleRender
});

ReactDOM.render(comp , self.shadowRoot.querySelector('#app1'));

Run Code Online (Sandbox Code Playgroud)

错误

target container is not a dom element

Run Code Online (Sandbox Code Playgroud)

我尝试使用contentWeb 组件 API，但随后它呈现在组件顶部而不是内部。有什么线索可以让 React 组件在 Shadow DOM 中渲染吗？

javascript shadow-dom reactjs

the*_*ack

2017 02-16

8
推荐指数

1
解决办法

3万
查看次数

IOS Safari是否支持Shadow DOM？

我的应用程序能够渲染Shadow DOM,但检查器无法显示阴影根.任何人都可以帮我解决这个问题吗？

mobile-safari web-component shadow-dom safari-web-inspector

geo*_*yws

2017 04-07

8
推荐指数

1
解决办法

4999
查看次数

Xpath 表达式可以访问 shadow-root 元素吗？

目前我正在抓取文章新闻网站，在获取其主要内容的过程中，我遇到了很多人在其中嵌入了如下推文的问题：

我将 XPath 表达式与XPath 助手（chrome 插件）一起使用以测试我是否可以获得内容，然后将此表达式添加到 scrapy python，但是元素内部的#shadow-root元素似乎超出了 DOM 的范围，我正在寻找获取在这些类型的元素中获取内容的方法，最好使用 XPath。

xpath scrapy web-scraping shadow-dom

Nec*_*net

2018 04-12

8
推荐指数

2
解决办法

8633
查看次数

如何使用嵌套组件创建和设置 svelte 3 自定义元素的样式？

我正在尝试在 svelte 3 中创建自定义元素（Web 组件）。我找不到任何方法来从 css 设置嵌套组件的样式。Svelte 在将样式注入到<style>ShadowDOM 内部之前删除它们。

问题是我想在我的根元素中嵌套组件。例如：

RootComponent（纤细的自定义元素）
- (进口) FooComponent
- (进口) BarComponent

如此处所述：svelte-custom-element

导入到 custom-element 的所有组件都必须将编译器选项设置为<svelte:options tag="component-name" />.

使用此选项设置嵌套组件按预期工作并注入根元素 ShadowDOM。问题是styles在嵌套组件中定义的没有被注入。此问题的解决方法是将它们<style>作为 ShadowDom 中的全局样式注入到 root 的元素中。（不）幸运的是，当自定义元素尚不存在时，svelte 会在编译期间自动删除所有未使用的样式。

我的目标是使用 svelte 创建 web 组件，然后在 svelte 之外将其用作本机 web 组件。

这是REPL

正如Condutry所写的那样，自定义元素在 REPL 上并不真正起作用：

REPL 中的编译器选项实际上并不影响运行的代码，只是影响显示的代码。因此，启用 customElement > 并不意味着您正在构建和运行 Web 组件

所以它更像是一个代码示例而不是一个工作示例。

我想知道是否有另一种方法来创建具有嵌套组件和适当样式的苗条自定义元素。
有没有办法禁用删除未使用的 css？

https://imgur.com/a/zZia566

从<div class="nested">开始从 Nested.svelte 导入的嵌套组件。

<style>元素应该.nested注入类，但它被 svelte 编译器删除。

web-component shadow-dom custom-element svelte svelte-component

Buk*_*k1m

2020 01-18

8
推荐指数

2
解决办法

2566
查看次数

ShadyCSS polyfill无法在Edge中正确处理CSS

我正在为第三方网站构建一个小部件，使用影子DOM来防止其CSS干扰我们的CSS。我正在使用ShadyDOM和ShadyCSS polyfills使它在Edge和IE中工作，但是它并没有像我期望的那样为阴影DOM转换CSS。

例：

<!DOCTYPE html>
<html>
	<head>
		<title>Shadow DOM test</title>
	</head>
	<body>
		<div id="container">container is here</div>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.3.0/webcomponents-bundle.js"></script>
		<script>
			const shadow = document.getElementById("container").attachShadow({ mode: "open" });
			const style = document.createElement("style");
			style.innerHTML = `
				:host .stuff {
					background: #ff00ff;
				}
			`;
			shadow.appendChild(style);
			const div = document.createElement("div");
			div.classList.add("stuff");
			div.innerHTML = "stuff inside shadow dom";
			shadow.appendChild(div);
		</script>
	</body>
</html>

Run Code Online (Sandbox Code Playgroud)

In Chrome (which supports shadow DOM natively), the stuff div has a pink background, as I would expect. But in …

javascript web-component polyfills shadow-dom shady-dom

Eli*_*ria

2019 10-27

8
推荐指数

1
解决办法

269
查看次数