标签: shadow-dom

关于原生WebComponents：

在constructor()开头的方法中class，通常将影子 DOM 树附加到Custom Element并返回对其的引用ShadowRoot：

class myCustomElement extends HTMLElement {

  constructor() {
    super();
    const shadowroot = this.attachShadow({mode: 'open'});
  }

 [... REST OF CODE HERE...]

}

当然，引用的名称可以是任何名称。

我见过：

• var shadow = this.attachShadow({mode: 'open'});（看：Element.attachShadow()）
• this.root = this.attachShadow({mode: 'open'});

我们可以很容易地使用：

• const myShadowRootzzz = this.attachShadow({mode: 'open'});

然而，已经存在Element.shadowRoot作为参考ShadowRoot。

那么为什么语法是

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

在示例中经常使用，简单说明时：

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

就足够了，因为......任何时候ShadowRoot需要引用，该引用字面意思是：

this.shadowRoot 

为什么 WebComponent …

ive started making a HTML/CSS/Vanilla JS web component library, and so far everything is going great. im using the typical ::part and all that, but i stumbled accros ::theme selector aswell, which is supposed to give quick access to styling without a creator having to set up more than necesarry.

problem is, i - whatever ive tried - can't seem to the get the ::theme selector work, is there anyone who can help me out ?

screendump is from https://meowni.ca/posts/part-theme-explainer/ …

我想测试我的自定义组件之一中插槽的内容。\n如果我在 html 文件中使用我的组件并在浏览器中打开它，一切都会按预期运行。但是，如果我想用玩笑来自动化测试，它就会失败。下面是一个输出形式为 jest 的最小工作示例：

占位符.js：

const template = document.createElement("template");\ntemplate.innerHTML = `\n    <p>\n        <slot></slot>\n    </p>\n`;\n\n\nclass Placeholder extends HTMLElement {\n    constructor() {\n        super();\n\n        this.attachShadow({ mode: "open" });\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n    }\n\n    get name() {\n        return this.shadowRoot.querySelector("slot").innerText;\n    }\n}\n\nwindow.customElements.define("place-holder", Placeholder);\n\nexport default Placeholder;\n

占位符.test.js：

import Placeholder from "../src/placeholder.js";\n\ndescribe("name is 'Lorem Ipsum'", () => {\n    let ph;\n    \n    beforeAll(() => {\n        ph = new Placeholder();\n        const textNode = document.createTextNode("Lorem Ipsum");\n        ph.appendChild(textNode);\n    });\n\n    test("if the name is 'Lorem Ipsum'", () => {\n …

我正在尝试配置 webpack 将自定义 SCSS 样式插入到影子 DOM 节点中，而不是插入到文档的头部。Shadow DOM 节点的位置并不总是一致的，因此传递元素以动态插入样式的能力是关键。

该文档style-loader引用了一个可以在配置中使用的函数，insert该函数允许创建函数以指定要添加样式的位置。导入样式并使用参数调用use函数target是该示例指定要添加样式的其他元素的方式。

我遇到的问题是options插入函数中调用的第二个参数始终未定义。该element参数存在并包含正确的自定义样式标记内容，但从options未定义指定将这些样式添加到何处的对象，因此样式最终会添加到文档头，这不是所需的结果。

这是我的相关 webpack 代码：

    module: {
    rules: [
        {
            test: /\.css$/i,
            exclude: /\.lazy\.css$/i,
            use: ['style-loader', 'css-loader'],
        },
        {
            test: /\.scss$/,
            exclude: /\.lazy\.scss$/i,
            use: ['style-loader', 'css-loader', 'sass-loader'],
        },
        {
            test: /\.lazy\.scss$/i,
            use: [
                {
                    loader: 'style-loader',
                    options: {
                        injectType: 'lazyStyleTag',
                        insert: function insertIntoTarget(element, options) {
                            var parent = null;
                            if (!options) {
                                parent = document.head;
                            } …

我想启用自定义 CSS 变量来自定义我的 Ionic 应用程序中的组件。

我读到了有关使用自定义 CSS 属性的信息，但我不知道它是如何工作的。

来自Angular 官方文档：

创作组件以支持自定义 作为组件作者，您可以通过四种不同方式之一显式设计组件以接受自定义。

1. 使用 CSS 自定义属性（推荐） 您可以通过使用 CSS 自定义属性（也称为 CSS 变量）定义组件的样式来为组件定义受支持的自定义 API。使用您的组件的任何人都可以通过定义这些属性的值来使用此 API，自定义组件在呈现页面上的最终外观。

虽然这需要为每个自定义点定义自定义属性，但它创建了一个适用于所有样式封装模式的清晰 API 契约。

我尝试使用@HostBinding：

@HostBind('style.--custom-property') customProp;

但我不明白如何将 css 属性从其父组件之一应用到我的组件。

作为https://github.com/vaadin/web-components/issues/5214的替代解决方案，我们现在在头像（-group）的影子 DOM 中设置了一些 css 部分的样式。

我想知道的是：

1. 我们可以/应该在 Vaadin 中（但一般而言）设置 CSS（部分）样式到什么程度而不破坏向后兼容性？

2. 构建良好 Web 组件的最佳实践是什么/在哪里，以便 API 消费者不会太快地破坏向后兼容性。

例如：当 API 使用者更改 css 显示属性时，使用根 Flex 容器构建 Web 组件将会中断，因此在这种情况下，将 Flex 容器移动到 Shadow DOM 可以使组件不那么脆弱。但是，消费者仍然可能会破坏很多东西......

这同样适用于 CSS 部分。

我试图在阴影dom中设置文本样式而没有成功.唯一的问题是我想从影子DOM之外做这件事.另一个重要的事情,Shadow dom样式应该只适用于'bar'元素内的阴影dom.这是我的测试代码:

<!doctype html>

<html>
  <head>
    <style>
      :host(bar) span:first-child {
        text-transform: uppercase;
        color: green;
      }
    </style>
  </head>

  <body>
    <bar></bar>

    <script>
      var bar = document.querySelector('bar');
      var root = bar.createShadowRoot();
      root.innerHTML = '<span>bar</span><span>foo</span>';
    </script>
  </body>
</html>

还有一个奖金问题,究竟是什么

:host(bar:host) { ... }

做什么？

来自文件:

实例化组件时,Angular

creates a shadow DOM for the component.
loads the selected template into the shadow DOM.
creates a child Injector which is configured with the appInjector for the Component.

Run Code Online (Sandbox Code Playgroud)

但是,据我所知,IE,Safari甚至Firefox的默认配置都不支持shadow DOM !
考虑到shadow DOM不是可以通过js库或其他东西轻松添加到浏览器的功能,如何对angular2进行浏览器支持？

PS:原谅我打电话给IE和Safari(特别是IE)流行的浏览器!

我最近研究过Shadow DOM,我想知道使用它而不是主要的目标是什么.

它给了什么？为什么我们不使用标准DOM而不是它(除了样式范围)？

AngularJS 2能够使用Shadow DOM本机,当encapsulation: ViewEncapsulation.Native我按照我的理解设置时,它是Web组件的一部分......

但这给出了一些问题:

• 什么时候encapsulation: ViewEncapsulation.Native它会回退到ViewEncapsulation.Emulated浏览器不支持Shadow DOM的时候？
• 当浏览器不支持Shadow DOM并设置时,是否能够使用webcomponents polyfill encapsulation: ViewEncapsulation.Native？