标签: shadow-dom

是否可以选择开槽元素中的后代元素？

像这样的例子：

::slotted(div p) {
        color: blue;
    }

<div><p>test</p><div>

这不起作用

slot制作一个可重用的 Web 组件固然很好，但到目前为止它还是有限制的。我面临的是风格问题。即使您知道注入内容的结构是什么，您也无法在组件内定义样式。

详细信息可以从我在 github 上的帖子中找到

我编写了一个组件，并尝试slot从外部注入内容，并尝试将样式添加到组件影子根中的特定内容。 演示

HTML 文件

  <my-navbar>
    <ul>
      <li>link1</li>
      <li>link2</li>
      <li>link3</li>
      </ul>
  </my-navbar>

JS文件

customElements.define('my-navbar', class extends HTMLElement {
  constructor () {
    super();
    const sr = this.attachShadow({ mode: 'open' });
    sr.innerHTML = `
      <style>
      /*worked*/
      ::slotted(ul)
      {
        color:green;
      }
      /*
      Suppose I know the outside content is "ul li", and I directly define the 
      style after they injected into component's slot. However, it just doesn't 
      work because the slotted selector is just …

超文本标记语言

<ion-item>
    <ion-label>Popover</ion-label>
    <ion-select [interfaceOptions]="customPopoverOptions" interface="popover" placeholder="Select One">
      <ion-select-option value="brown" text-wrap>Brownasdfasdfasdfasdfadfadsfasdfadfasdfafdsadfaf</ion-select-option>
      <ion-select-option value="blonde">Blonde</ion-select-option>
      <ion-select-option value="black">Black</ion-select-option>
      <ion-select-option value="red">Red</ion-select-option>
    </ion-select>
  </ion-item>

SAS：

ion-select-option{
   ion-label{
     white-space: normal !important;
   }
}

我无法覆盖现有的white-space: nowrap

我想知道如何覆盖shadow-dom css

我试图select通过使用 Shadow dom 将内容插入其中来创建一个“增强”元素。这是文件（完整代码位于Glitch中：

import { LitElement, html } from 'lit-element'
export class Select extends LitElement {
  render () {
    return html`
      <select id="_native">
        <slot></slot>
      </select>
`
  }
}
customElements.define('nn-select', Select)

然而，似乎没有什么被插入。重命名select为select2“解决”问题。

是否有限制使我们无法<slot>使用原生元素？

我们在一个通用样式文件中重置了 CSS (margin:0px;padding:0px;)，我们将其作为一个组件编写，并作为我们正在开发的其他组件的一部分包含在内。

我们使用如下通用选择器

*,*:before,*:after{
color:pink

}

在我们的每个组件上，我们都有一个:host样式，我们试图用它来覆盖这个颜色

:host{
color:yellow
}

奇怪的是，我们期望:host比通用选择器有更多的特异性，但事实并非如此。通用选择器样式覆盖了我们的:host样式

我们只想要组件 z-foo 的 MAKE ME GREEN 样式（在附加的 plnkr 示例中）

尝试了多种方法，似乎没有任何效果

http://plnkr.co/edit/l8NSJT?p=preview

它是粉红色的，这意味着它仍然被通用选择器覆盖

*,*:before,*:after{
color:pink

}

如何在 shdow dom 中运行 Angular 应用程序？

代码：

<script type="text/javascript">
    customElements.define('show-hello', class extends HTMLElement {
        connectedCallback() {
            const shadow = this.attachShadow({mode: 'closed'});
            shadow.innerHTML = `
                <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
                <link rel="stylesheet" href="http://domain/styles.5b06983da863c73ff6ae.css">
                <app-root></app-root>
            `;

            var tag = document.createElement('script');
            tag.src = "http://domain/runtime.c5b03efbbe032268e2db.js";
            tag.defer = true;
            shadow.append(tag);

            tag = document.createElement('script');
            tag.src = "http://domain/polyfills-es5.1a4928232678b73b212e.js";
            tag.nomodule = true;
            tag.defer = true;
            shadow.append(tag);

            tag = document.createElement('script');
            tag.src = "http://domain/polyfills.5d56ab2a8a4492384195.js";
            tag.defer = true;
            shadow.append(tag)

            tag = document.createElement('script');
            tag.src = "http://domain/scripts.cb9c1c75fdd88cce0ad3.js";
            tag.defer = true;
            shadow.append(tag)

            tag = document.createElement('script');
            tag.src …

我使用 Shadow DOM 进行 CSS 隔离。我希望rem字体大小使用 Shadow DOM 中的 HTML 元素字体大小。

中的字体<div class="shadow-div">shadow DOM font (should be 100px)</div>应该是，100px但 rem 大小仍然是16px。

这是一个小代码片段，演示了我想要做什么。

<style>
  html {
    font-size: 16px;
  }
</style>
<div>light dom font</div>

<div id="root"></div>

<script>
  const root = document.getElementById('root');
  root.attachShadow({ mode: 'open' });

  const html = document.createElement('html')
  html.innerHTML = `
            <head>
                <style>
                    html {
                        font-size: 100px;
                    }

                    .shadow-div {
                        font-size: 1rem;
                    }
                </style>
            </head>
            
            <body>
                <div class="shadow-div">shadow dom font (should be 100px)</div>
            </body> …

chrome中的谷歌翻译扩展，具有弹出功能，它立即显示所选单词的翻译，我想访问弹出窗口显示的那些翻译，但这个弹出元素是shadowRoot（“关闭”），所以javascript无法访问其内容，我红色一篇关于该主题和作者的文章说：

但实际上，没有什么可以阻止某人在组件定义之前执行以下 JavaScript。 Element.prototype._attachShadow = Element.prototype.attachShadow; Element.prototype.attachShadow = function () { return this._attachShadow( { mode: "open" } ); };

是否可以更改其他扩展的attachShadow方法？如果是这样，我的扩展应该在哪里执行它？background_script 或者也许在某个地方。我认为每个扩展都有自己的环境，我没有机会编辑它们的方法。我希望我错了:)

我一直在尝试通过扩展类来创建自定义 HTML 元素HTMLElement。我尝试通过链接与其他两个文件位于同一目录中的 CSS 文件来添加一些样式 -index.html和custom.css.

主文件夹

• 索引.html
• 自定义.css
• 自定义.js

index.html:

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="nofollow" type="text/css" href=''>
</head>
 
    <body>
        <script src="./custom.js"></script>
        <smooth-button text="Smooth button" no-1 = 1 no-2 = 2></smooth-button>
    </body>
 
</html>

custom.css:

smooth-button{
    display: block;
    color: blue;
    background-color: orange;
}

custom.js:

class SmoothButton extends HTMLElement{
 
    constructor(){
        super();
        this.shadow = this.attachShadow({mode: "open"})
    }
 
    connectedCallback(){
        this.render();
    }
 
    render(){
        this.SumOfNo1AndNo2 …

我正在构建一个d3.js用于数据可视化的工具.该工具依赖于webcomponentss和shadowDOM.d3.js无法仅通过选择shadowDOM中的任何节点d3.select.有办法d3在里面工作shadowdom还是我错过了一些明显的东西？

详细地:

d3.select("#insideShadowDom")

没有返回/选择任何东西,只要你有类似的东西

<web-component>
#document-fragment
   <div id="insideShadowDom"></div>
</web-component>

澄清:它shadowDOM是由框架生成的.我找到了获得初始shadowRoot(注入)的方法.但是我一直在想,如果有可能,告诉d3有关shadowDOM,即使我没有手柄createShadowRoot()返回.