标签: shadow-dom

阴影dom封装css样式,选择器不跨越阴影边界.

问题:如何在影子dom中使用全局常见的css样式？
(假设有一些常用的CSS样式将用于所有页面(例如:font-family,h1,h2,clear,reset ...),如何使它在阴影dom中工作？)

我正在寻找一种从外部设计阴影DOM的方法.例如,我想将所有'span.special'元素中所有文本的颜色设置为RED.包括来自shadow DOM的'span.special'元素.我怎么能这样做？

以前为此目的有:: shadow伪元素和/ deep / combinator aka >>>.所以我可以写一些像

span.special, *::shadow span.special {
    color: red
}

但是现在:: shadow,/ deep /和>>>已被弃用.那么,我们有什么替代它们？

我有这样的事情:

import { Component, OnInit, Input } from '@angular/core';

@Component({
    selector: 'column',
    template: '<ng-content></ng-content>'
})
export class ColumnComponent {

    @Input() columnWidth: string = '0';        

    constructor() {}
}

我想申请财产columnWidth时至[ngStyle]上

<ng-content></ng-content>

父元素,做这样的事情:

<div [ngStyle]="{'width': columnWidth+'px'}" > ....

我知道如何将样式应用于主机元素:

:host {  /*styles*/  }

但我不知道将参数传递给它.

我有一个带有 shadow DOM 的自定义元素，它侦听属性target更改。
target应该是我的组件应该附加到的元素的 ID。

我试过使用querySelector和getElementById来获取外部 DOM 的元素，但它总是返回null.

console.log(document.getElementById(target));
console.log(document.querySelector('#' + target));

以上两者都返回null。

有没有办法从 shadow DOM 中获取对父文档中元素的引用？

<Video>由于某些认证要求，我想禁用我网站标签的画中画功能，但 Firefox 不允许关闭。任何帮助，将不胜感激。

• Firefox 使用shadow-root with{mode:"closed"}强制显示画中画工具（见图片）。
• Firefox 也不支持画中画 API -检查此链接

注意：我还添加了disablePictureInPicture属性，但它仍然不适用于 Firefox。

 <video width="400" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" controls  disablePictureInPicture></video>

注意：这里和其他地方都存在现有问题，但它们都是特定于 jQuery 的，并且没有涵盖纯 JavaScript 的规范答案，包括对 Web 组件的支持。

我想模拟按 Tab 键，以便焦点转移到 Tab 键顺序中的下一个元素。下一个元素可以是任何 HTML 可聚焦的 HTML 元素或带有tabindex="0". 这也需要在某些后代 HTML 元素可能是具有影子 DOM 的自定义 Web 组件的情况下起作用。

潜在的解决方案可能是触发按键事件或迭代后代节点以寻找可聚焦的节点。

我正在学习带阴影根的Web组件,如果可以通过开箱即用的代码加载外部样式表,似乎无法在谷歌上找到它？我还没有使用聚合物或任何其他Web组件库(还).代码如下:

<script src="../../libs/jquery-2.1.1.min.js"></script>
<script>
    var hollaProto = Object.create(HTMLElement.prototype);
    hollaProto.createdCallback = function () {
        var shadow = this.createShadowRoot();
        var content = document.querySelector('link[rel=import]').import.querySelector("div");

        $("button[data-command=holla]", content).on("click", function () { alert("Holla!"); });

        shadow.appendChild(content);
    };
    var hollaWidget = document.registerElement("holla-back", {
        prototype: hollaProto
    });
</script>
<div class="holla-back">
    <button data-command="holla">Holla!</button>
</div>

如果我将我的链接标记放在第一个脚本标记之上,我将整个网络时代设置为样式,而不是Web组件.

如果我把它放在它下面div.holla-back没有任何风格.

如何将外部样式表与Web组件一起使用？

阅读有关Shadow DOM的文章和教程,我遇到了一个让我感到困惑的描述:

"Shadow DOM指的是浏览器将DOM元素子树包含在文档呈现中的能力,但不包含在主文档DOM树中."

那么影子树不是DOM树的一部分？但浏览器仍会看到它并呈现其内容？

我是webcomponents的新手.由于web组件的v1可用,我从那里开始.我已经在网上阅读了关于他们的各种帖子.我对正确编写它们特别感兴趣.我已经阅读了有关插槽并让它们正常工作的信息,尽管我的努力并未导致按照我的预期方式工作的插槽web组件.

如果我编写了这样的嵌套Web组件,嵌套/开槽web组件中的DOM不会插入父级的插槽中:

<parent-component>
  <child-component slot="child"></child-component>
</parent-component>

这是父webcomponent HTML:

<div id="civ">
  <style>
  </style>
  <slot id="slot1" name="child"></slot>
</div>

由于每个web组件(父组件和子组件)都是独立的,因此我一直在创建它们:

customElements.define('component-name', class extends HTMLElement {
  constructor() {
    super();
    this.shadowRoot = this.attachShadow({mode: 'open'});
    this.shadowRoot.innterHTML = `HTML markup`
  }
})

生成的DOM包括2个阴影根.我试图编写没有阴影dom的子/槽元素,这也不会导致托管孩子的父阴影dom.

那么,构建v1嵌套web组件的正确方法是什么？

我想更改隐藏在影子根中的元素的属性。由于项目的性质，我无法直接引用 JS 中的文档，我只能使用自定义类（不适用于影子根）或 jQuery，但我不知道如何编写指向该文件的路径元素。

该元素没有“部分”，因此我无法在选择器中使用它。

我已经尝试过的 - 我选择了shadow上方的最后一个元素并引用了它的shadowRoot，然后我尝试通过它的id找到封装的元素。我正在devtool中测试它，到目前为止还没有成功。

$("#root_ptcschartline-7-bounding-box".shadowRoot).find("#chart-line")
  .css('padding','100px');

html 片段：