标签: web-component

我有两个网络组件，一个类似于列表项，另一个是容器。在列表项中有一个按钮，它调度 onclick 事件。两个组件都使用独立的 Shadow-dom。

<custom-list>
        <custom-list-item></custom-list-item>
        <custom-list-item></custom-list-item>
        <custom-list-item></custom-list-item>
</custom-list>

如何在“自定义列表”中侦听“自定义列表项”中的按钮发出的事件？

我的问题中粘贴的声明是从https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#Using_the_lifecycle_callbacks复制的。

作为一名没有 WebComponent 经验的开发人员，我试图了解迄今为止推荐的所有经验法则和最佳实践。

继续阅读它说“...使用 Node.isConnected 来确保”。它的含义很明显：检查它是否仍然连接，但至少对我来说，尚不清楚我应该采取什么措施来解决它，或者在某些情况下我应该期待什么。

我的情况是我正在创建一个 Web 组件来侦听 SSE（服务器发送事件）。这对于 alife 仪表板和其他几个场景非常有用。SSE事件在从Kafka Stream消费后基本上将由NodeJs或Spring Webflux响应。

到目前为止，我所做的所有简单示例都没有遇到任何元素在连接回调期间不再连接的问题。

此外，我没有阅读最佳实践中关于“不再连接的元素”的任何建议。

我读了一些精彩的讨论：

可以在光盘之前调用自定义元素连接回调多次吗

从那里我了解到我始终可以信任这个生命周期构造函数 -->connectedCallback -->disconnectedCallback。

和

当所有子自定义元素已连接时如何拥有“connectedCallback”

基本上我了解到没有一个特定的方法“在所有孩子都升级后调用”

这两个问题都接近我的问题，但它没有回答我：应该注意哪些挑战或风险，或者如何解决“一旦元素不再连接，可能会调用connectedCallback”的可能性？在我上述的情况下，我是否缺少任何治疗？我是否应该创建一些观察者，当该元素不再可用时触发，以重新创建事件源对象并再次向此类事件源对象添加侦听器？

我粘贴了下面的代码进行说明，完整的 Web 组件示例可以从https://github.com/jimisdrpc/simplest-webcomponet克隆，其后端可以从https://github.com/jimisdrpc/simplest-kafkaconsumer克隆。

const template = document.createElement('template');
template.innerHTML = `<input id="inputKafka"/> `;

class InputKafka extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {

    this.attachShadow({mode: 'open'})
    this.shadowRoot.appendChild(template.content.cloneNode(true))

    const inputKafka = this.shadowRoot.getElementById('inputKafka');

    var source = new EventSource('http://localhost:5000/kafka_sse');

    source.addEventListener('sendMsgFromKafka', function(e) {
      console.log('fromKafka');
      inputKafka.value = e.data;
    }, false);

  }
  attributeChangedCallback(name, …

我有一个 Web 组件，它的模板如下所示......

<template>
  <div class="jrg-app-header">
    <slot name="jrg-app-header-1"></slot>
    <slot name="jrg-app-header-2"></slot>
    <slot name="jrg-app-header-3"></slot>
  </div>
</template>

我基本上是想将最后一个插槽的内容设置为flex:1;时尚。有 CSS 查询可以做到这一点吗？我尝试了一些清单

::slotted(*):last-child{
  flex:1;
}

但这没有用。如何设置最后一个开槽对象的样式？

我想将 CSS 框架 Bulma 与 LitElement 一起使用。我知道我可以使用外部样式表但是，他们表示这样做是不好的做法。我也有一个问题，我必须将它导入到每个元素中，这感觉不对。

因此，我将整个 Bulma 文件内容复制到 js 模块中，但导入后样式未应用。

import { css } from 'lit-element'

export default css`
@-webkit-keyframes spinAround {
  from {
    transform: rotate(0deg);
  }
...

将样式导入为链接标记是可行的，但如上所述是不好的做法。

import { LitElement, html, css } from 'lit-element'
import './src/table.js'
import styles from './styles.js'

class LitApp extends LitElement {
  constructor() {
    super()
    this.tHeader = ['status', 'name', 'alias']
    this.data = [
      ['connect', 'john', 'jdoe'],
      ['disconnect', 'carol', 'carbon'],
      ['disconnect', 'mike', 'mkan'],
      ['disconnect', 'tina', 'tiba'],
    ]
  }
  static get styles() …

我正在使用 Polymer 学习 Web 组件。我是网络开发的初学者。

如何理解.checkedHTML 元素的属性或属性中的点表示法的含义？

<input id="state" type="radio" name=${this.group} .checked=${this.checked} />

我正在构建一个仅使用本机、普通 JS 功能（ES6、Web 组件、导入模块）的网站。

我想包含一个 polyfill 来让 Safari 支持扩展 HTML 元素 ( class MyLink extends HTMLAnchorElement)。理想情况下，我想通过importmain.js 文件中包含它，而不是作为<script>index.html 中的标签。

我首先尝试了官方的Custom Elements V1 polyfill，包括通过脚本标签 ( <script src="https://unpkg.com/@webcomponents/custom-elements"></script>) 和import(import "https://cdn.skypack.dev/@webcomponents/custom-elements"; )。两种方式都没有错误，但我没有看到在 Safari 上扩展内置元素的支持。

我尝试了一个不同的polyfill，它明确提到了可定制的内置元素，在这种情况下，通过脚本标签添加它确实可以在Safari上运行：

<script src="//unpkg.com/@ungap/custom-elements"></script>

但如果我在我的js中导入它仍然不起作用：

import ungapCustomElements from "https://cdn.skypack.dev/@ungap/custom-elements";

我是否使用了错误的 CDN？错误的填充材料？有什么不同？为什么它可以通过脚本标签工作，但不能作为 ES6 导入？

如果相关的话，这是我尝试使用的自定义元素的声明：

class ButtonLink extends HTMLAnchorElement {
  connectedCallback() {
    console.log("This is not called on Safari");
  }
}

customElements.define("button-link", ButtonLink, { extends: "a" });

我正在使用 vue-cli 4.5.13 和 --target wc 选项创建一个 Vue Web 组件。我还需要该组件来使用 vue-i18n-next 插件（vue 3 项目的最后一个版本），这需要将一些选项传递给主 Vue 实例，但现在没有主实例，因为入口点是 vue 组件本身，因此 i18n 必须在组件内实例化。

我发现了 vue2 的这个问题： How can I use vue-i18n in a Vue web component? 它适用于 vue2，但i18n在组件选项中实例化对象对 vue3 无效（this.$i18n 保持未定义）。所以这不起作用：

export default {
  name: "custom-compo",
  i18n: i18n,
  components: { ChildComponent }
  data, methods...
};

如果导出 Web 组件（并在标准页面上使用它），或者npm run serve在内部包含此组件的标准应用程序（但再次在组合中实例化 i18n 作为该问题的答案，而不是在 main.js 中），则该解决方案应该有效）

我不是在问如何在普通的 vue 项目中设置 vue-i18n，而是在问如何使用 vue-cli 和 vue 3 在将要构建或导出为自定义元素或 Web 组件的组件中初始化 i18n。

我没有使用组合 api 和 …

使用 Shadow DOM 创建具有封装样式的 Web 组件时，可以使用 ::part 伪选择器对部分阴影标记进行样式设置 ( https://developer.mozilla.org/en-US/docs/Web/CSS/::part）。

零件选择器可以用于定位嵌套阴影零件吗？

<custom-element>
  #shadow-root
    <div part="thats-easy"></div>
    <another-custom-element part="proxy-part">
      #shadow-root
        <div part="target-me"></div>
    </another-custom-element>
</custom-element>

目前的努力没有结果：

another-custom-element::part(target-me) { }
custom-element::part(proxy-part) another-custom-element::part(target-me) { }
custom-element::part(proxy-part another-custom-element::part(target-me)) { }
custom-element::part(proxy-part::part(target-me)) { }
```

我想使用https://github.com/microsoft/vscode-webview-ui-toolkit中的一些 Web 组件。但我不知道如何在 Svelte 中使用它们，因为 svelte 将 Web 组件视为 svelte 组件。

当我尝试将它们用作时，

<script lang="ts">
import { Button } from "@vscode/webview-ui-toolkit"
</script>

<main>
  <Button appearance="primary">Text</Button>
</main>

我收到这个错误，

Element does not support attributes because type definitions are missing for this Svelte Component or element cannot be used as such.

Underlying error:
JSX element class does not support attributes because it does not have a '$$prop_def' property.ts(2607)
'Button' cannot be used as a JSX component.
  Its instance type 'Button' is not …

我有一个 Vue Web 组件。当我将其构建为普通的 Vue 组件时，一切正常。然而，当我将其转换为 Vue Web 组件时，它就失去了所有 Tailwind 样式。提前感谢您的帮助。

tailwind.config.js

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
      },
    },
  },
  plugins: [
  ],
}

顺风.css

@tailwind base;
@tailwind components;
@tailwind utilities;

和我的 vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue({
    template: {
      compilerOptions: {
        // treat all tags with a dash as custom elements
        isCustomElement: (tag) => tag.includes('-')
      }
    }
  })], …