标签: web-component

我正在学习如何使用fetch API和lit-element在 Web 组件中获取异步数据：

import {LitElement, html} from 'lit-element';

class WebIndex extends LitElement {

    connectedCallback() {
        super.connectedCallback();
        this.fetchData();

    }

    fetchData() {
        fetch('ajax_url')
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                };
                response.json();
            })
            .then(data => {
                this.data = data;
                console.log('Success:', data);
            })
            .catch((error) => {
                console.error('Error:', error);
            });
    }

    render() {
        if (!this.data) {
            return html`
                <h4>Loading...</h4>
            `;
        }
        return html`
            <h4>Done</h4>
        `;
    }

}

customElements.define('web-index', WebIndex);

然而呈现的html永远不会改变。我做错了什么？这是在 Web 组件中获取异步数据的最佳方式吗？

Shadow Root是否有维护一个官方列表，其中包含渗透到的CSS 属性的最新详细信息WebComponent？

我认为有以下几点：

• color
• line-height
• font-family
• font-size
• font-weight

都是这样，但至少还有十几个吧？

为了让 Web 组件相互通信，我使用了自定义事件。让我们想象一下以下情况：

WebComponentA 使用或包含 WebComponentB，如果单击按钮，WebComponentB 会发送 CustomEvent（bubbles：true，composed：true）。如果 WebComponentB 发送此事件，WebComponentA 想要执行某些操作。

我应该如何在 WebComponentB 中调度事件？

window.dispatchEvent(customEvent);

或者

this.shadowRoot.dispatchEvent(customEvent);

我应该如何捕获 WebComponentA 中的事件？

window.addEventListener(custom-event, () => {
);

或者

this.shadowRoot.addEventListener(custom-event, () => {
);

我应该考虑使用其中一种或另一种是否有任何负面影响？

谢谢你！

我已经使用启动项目创建了一个 stenciljs web 组件，并且我试图通过package.jsondependentecy 将其抓取到另一个 stenciljs 项目中，该项目指向 git 存储库。

Web 组件已导入，但当我尝试在 tsx stenciljs 项目中运行该组件时，我注意到以下内容：

• props没有传入，css我可以看到它被应用，但内容丢失
• 如果我在页面上添加一些额外的内容，例如字符或其他内容，开发服务器会呈现 Web 组件（也尝试构建项目，相同的行为）
• Web 组件还包含一些.svgs推送到.tsx文件中的 return 语句，即使在页面上添加字符后，这些图标仍然不会呈现

不确定我在这里是否做错了什么，奇怪的是，只要我在页面上添加其他内容（除了该 Web 组件之外），它就会正确呈现。

我通过以下方式将 Web 组件导入到 stenciljs 项目内的组件中：

import 'my-component-from-git' <-- 指向node_modules文件夹中的webcomponent文件夹

stenciljs web 组件配置：

plugins: [
    sass()
  ],
namespace: 'my-component',
outputTargets: [
  {
      type: 'dist',
      esmLoaderPath: '../loader',
    },
    {
      type: 'dist-custom-elements-bundle',
    },
    {
      type: 'docs-readme',
    },
    {
      type: 'www',
      serviceWorker: null, // disable service workers
    },
  ],

stenciljs 项目配置：

globalStyle: 'src/global/app.css', …

设置：

我有一个 Web 组件（Angular 10）正在 Angular 10 应用程序中使用。Web 组件对 Web API 进行 Httpclient 调用，以获取一些数据来填充菜单下拉列表。该 Web 组件是使用 Angular 10 制作 Web 组件的标准方法制作的。

Web 组件通过主客户端应用程序中的脚本加载。这是来自父应用程序的 angular.json 文件。

1."scripts":
 [
    "projects/web-component-test/src/assets/plugin.bundle.js"
 ]

一切正常，除了我们收到 401 错误（未经授权），因为端点要求用户登录。通过正常工作，还有其他控件可以根据需要显示下拉列表，它从 API 获取数据呼叫不会被填充。

流程：

1. 用户访问网站，然后提示登录（使用 keycloak Auth）。
2. 应用程序加载正常，但 Web 组件尝试加载菜单项时出现 401 错误除外。

来自父应用程序的 Http 调用工作正常；jwt 令牌将添加到标头中以调用受保护的 API。来自子 Web 组件的调用在标头中没有 jwt 令牌，因此会失败并出现 401 错误。

httpinterceptor：我们在主客户端应用程序（Web 控件的父级）上有一个 httpinterceptor 。从主应用程序发出的 Http 调用将通过拦截器进行路由，如果需要，令牌将附加到标头。

从子 Web 组件发出的调用不会触发父应用程序中的拦截器？

问题： 如何从子 Web 组件路由通过父级中的 http 拦截器进行调用，以便可以添加令牌。

我尝试过的事情：如果我这样做，我可以让网络组件正常工作：

1. 当父级加载时，我将令牌存储在本地存储中
2. 在 Web 组件上使用 http 拦截器，从本地存储中检索令牌并使用它。

** …

使用 LitElement 在 Web 组件/shadowDOM 应用程序中使用大型 css 库（如 bootstrap）的最简单方法是什么？
尝试了以下方法：

1. 在组件内使用链接标签。有效，但会产生 FOUC（无样式内容的闪存）。
2. 将所有内容渲染到 Light DOM（我正在使用 LitElement，它们有一个 createRenderRoot() 重写。也可以，但随着应用程序变得更加复杂，保持组件文档隔离会很好。

寻找在此设置中使用 boostrap 的最简单方法。

我正在尝试让 web 组件与 vitejs 一起使用。

我尝试使用的组件： https: //www.webcomponents.org/element/input-knob

我按照文档中的描述做了。

安装和设置@vitejs/plugin-vue

https://github.com/vitejs/vite/tree/main/packages/plugin-vue#vitejsplugin-vue-

在 config 中启动自定义元素。（我还尝试简单地将自定义元素放入 main.js https://github.com/vitejs/vite/issues/1312

vite.config.js

import { VitePWA } from 'vite-plugin-pwa'
import vue from '@vitejs/plugin-vue'
export default {
  plugins: [
    VitePWA(),
    vue({
      template: {
        compilerOptions: {
          isCustomElement: tag => tag === 'input-knob'
        }
      }
    })
  ]
}

仍然收到相同的警告：皱眉：

app.config.isCustomElement = tag => tag.startsWith('input-')

console.log(app.config.isCustomElement('input-knob'))

main.js

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

const app = createApp(App);

app.config.isCustomElement = tag => tag.startsWith('input-')

console.log(app.config.isCustomElement('input-knob')) …

我正在尝试创建一个Web 组件 button，但是当我将其添加到 HTML 中时，该constructor()函数永远不会被调用。

class MyButton extends HTMLButtonElement {
  title = "";
  constructor({ title }) {
    super();
    this.title = title;
    this.addEventListener("click", (e) => this.rippe(e.offsetX, e.offsetY));
  }

  rippe(x, y) {
    let div = document.createElement("div");
    div.classList.add("ripple");
    this.appendChild(div);
    div.style.top = `${y - div.clientHeight / 2} px`;
    div.style.left = `${x - div.clientWidth / 2} px`;
    div.style.backgroundColor = "currentColor";
    div.classList.add("run");
    div.addEventListener("transitioned", (e) => div.remove());
  }

  connectedCallback() {
    this.innerHTML = this.title;
  }
}
window.customElements.define("my-button", MyButton, { extends: "button" });

my-button { …

我正在 Vue 中构建第三方 Web 组件，它的大部分样式都相当依赖 Tailwindcss。

Web 组件的 Shadow-dom 封装了大部分样式和 CSS，因此（大部分）不会有样式从 Web 组件所在的网页渗透到 Shadow dom 的内部，反之亦然。

然而，Tailwind 使用基于 rem 的值来调整几乎所有字体、填充、高度、宽度等的大小。

我刚刚发现，显然，父页面的样式渗入到 Shadow-dom 中的一个例外是，shadow-dom 会将主页样式表的 html{ } 部分中设置的基本字体大小固有到 Shadow-dom 中。

由于基于 rem 的值继承自父级的 html{} 块，这意味着如果主题页面在其页面的 html { 中设置了字体大小，则所有基于 Tailwind 的高度、字体、填充等最终都会被任意调整大小。设置为 16px 以外的任何值的块。

在我返回并尝试从我的组件中完全剥离 Tailwind 之前，有什么方法可以阻止 Shadow-dom 从主页的 html {} 块继承字体大小？对于一个 Web 组件来说，提供几乎所有封装的样式，却被迫从页面继承根字体大小，这似乎很荒谬。

我尝试用 !important 覆盖字体大小，也尝试将组件包装在另一个标签中，但似乎都不起作用。

我创建了一个具有阴影模式“打开”的 Web 组件，其使用方式如下：

<scu-switch checked="true" value="switch1">
  <span id="scu-switch-label">Switch On</span>
</scu-switch>

看起来像这样：

然后我使用以下全局 CSS 将按钮添加到网页：

<scu-switch checked="true" value="switch1">
  <span id="scu-switch-label">Switch On</span>
</scu-switch>

现在按钮样式已损坏：

当我检查按钮时，我可以看到，全局样式已应用于影子根 内部的范围（并注意它不是插槽内容的一部分）。

Shadow DOM 应该将样式与网页的其余部分隔离。text-align: center尽管它是在 Shadow DOM 之外定义的，为什么在这里应用它？