标签: web-component

在 React 中，我们可以使用它PropTypes来将特定的 prop 标记为必需的。

requiredFunc: PropTypes.func.isRequired,

Vue 还支持必需的 props：

    propC: {
      type: String,
      required: true
    },

如何在 lit-element 中做到这一点？很有趣的是，一个框架声称它非常好，但却不支持诸如必需属性之类的简单内容。

关于原生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/ …

我会拼命寻求帮助来检查这是否是 Angular 问题、Angular 元素问题或我引起的问题。

介绍

在我们的客户项目中，我们借助 Angular 元素将组件导出为 Web 组件。在某些用例中，我面临着将一个 Web 组件堆叠在另一个 Web 组件内的问题。让我通过向您提供我推送到 github 的测试项目的片段来详细介绍：https://github.com/aetzlecx/angular-elements-stacking/（测试项目非常简化，仅演示问题并省略其他不必要的细节或项目相关细节）

旁注：我在 Angular 版本 10、11 和 12 上尝试过此操作；）。

父组件

父组件使用内容投影在 的帮助下包含子组件ng-content。按钮只需切换子内容：

<button (click)="triggerButtonClicked()">Toggle</button>

<p>Child content:</p>
<div *ngIf="childVisible">
  <ng-content></ng-content>
</div>

export class ParentComponent {
  childVisible = true;
  triggerButtonClicked(): void {
    this.childVisible = !this.childVisible;
  }
}

在 Angular 应用程序内部，当我将一个元素堆叠到组件中时，它可以正常工作，没有任何问题，并且单击按钮会使子内容按预期切换。

子组件

然而，当我现在也将其他 Angular 组件导出为 Web 组件并将它们堆叠在父组件下时，我会遇到以下测试代码的困难。wc-child只是一个在无序列表 ( ul> li) 中显示给定项目的组件。然而，Web 组件的类型并不重要（简单组件与复杂组件）。

第一个用例：

<wc-parent>
  <wc-child items="A,B,C"></wc-child>
</wc-parent>

这会导致 Web …

我想测试我的自定义组件之一中插槽的内容。\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 …

MVCE

您可以执行以下代码片段：

const a = document.createElement("div");

// display big red rectangle in top left
a.style.position = "absolute"; a.style.left = "10px"; a.style.top = "10px";
a.style.background = "red";
a.style.color = "green";
a.style.fontSize = "large";
document.body.appendChild(a);

// attach shadow root
a.attachShadow({mode: 'closed'}).innerHTML = `
      <style>
        :host {
          all: initial;
          display: block;
        }
      </style>

      <p>
        A paragraph element which should not inherit any styles from its parent webpage (outside the shadow DOM).
      </p>`;

描述

我已经从lamplightdev逐字复制了影子根部分，但在各个 Stack Overflow 线程上也给出了相同的代码。由于此代码，该<p>元素不应从其父主体继承任何样式。

问题

您可以运行代码片段，看到段落元素显示为绿色，字体大小很大，这是意外的，因为我已经设置了:host …

我能够构建 vue Web 组件并将其加载到其他页面中，但我找不到如何正确包含 UI 框架的文档。看来 Web 组件位于 ShadowDOM 下，并且使用样式标签导入 css 不起作用。

（在模板中添加CDN链接并应用样式）

任何有关任何框架、Vuetify 或 Ant Design 或 Tailwind CSS 的提示都将受到赞赏。

类似的问题：Vuetify构建为Web组件样式未显示

我正在使用 VueJS 3 创建一个 Web 组件，我想在组件上公开一个方法，允许用户执行如下操作：

  <custom-component id="x1" />

  <script>
    var component = document.getElementById("x1");
    
    component.customMethod(); // as focus() method on native elements
  </script>

如果我在组件上定义了一个方法，我就可以在组件内部调用该方法。但当我将其用作 Web 组件时，该方法不可用。

  //main.ts/js
  import { defineCustomElement } from "vue"
  import component from "./component.ce.vue"

  const element = defineCustomElement(component );

  customElements.define("custom-component ", element);

  //component.ce.vue
  const customMethod = () => { console.log("Executed"); }

我如何向 Vue 组件包装器指示 customMethod 将在组件外部可用？

我正在使用Angular Element （版本 13）构建一个 Web 组件，我有一个关于捆绑的问题。

是否可以以所有 js 包（main.js、runtime.js 和 polyfills.js）以及 /assets 文件夹中的 css 和 svg 图标都位于单个 js文件中的方式构建 Web 组件在最后？

我现在正在做的是 ng build --configuration element --output-hashing none && node build.js在 build.js 包含的地方运行：

const fs = require('fs-extra');
const concat = require('concat');

(async function build() {
  const files = [
    './dist/runtime.js',
    './dist/polyfills.js',
    './dist/main.js'
  ];

  await concat(files, './dist/webcomp-ecar-friendly-accommodations.min.js');
  await fs.remove('./dist/runtime.js')
  await fs.remove('./dist/polyfills.js')
  await fs.remove('./dist/main.js')
})();

有没有办法将 css 文件和 /assets 也捆绑在同一个 js 包中？我确实知道它是在其他应用程序中使用 Webpack 完成的，但我不确定如何使用 Angular CLI 来完成此操作。

任何意见将不胜感激！

作为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 部分。