标签: web-component

我最近一直在探索 Angular 组件对 css 和 dom 的封装。

我使用 ng-cli 搭建了一个快速项目并加载了一个组件。假设组件选择器是“app-component”。这封装了与该组件有关的所有 dom 和 css。到目前为止一切都很好。

我从之前的阅读中了解到，组件既不允许外部 CSS 渗入，也不允许内部 CSS 渗出（这更特定于 Web 组件）

现在，在 index.html 文件中，我包含了一个 bootstrap css 文件，只是为了观察 bootstrap css 中的样式是否渗入组件中，令我惊讶的是它确实发生了。我可以使用在我的组件中提供引导 css 的所有类。

为什么会这样？本质上，外部 css 正在渗透到组件中。我了解 Angular 中的视图封装概念，但这不适合。

听起来有点天真，但可能是我在这里遗漏了一点！

编辑

基本上我指的是这个：

https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom

这说：

作用域 CSS：在 shadow DOM 中定义的 CSS 是作用域的。样式规则不会泄露，页面样式也不会渗入。

我正在使用 ES5 制作一个扩展HTMLAnchorElement. 由于 Web 组件仅适用于 ES6 及更高版本，因此我在此处包含了 ES5 polyfill 。

制作一个扩展的 web 组件，HTMLElement然后在页面上使用它的标签工作正常。但是扩展除此之外的任何元素HTMLElement似乎都不起作用。

我正在使用最新版本的谷歌浏览器来测试这个。

下面是我的扩展元素的代码HTMLAnchorElement。

function CustomAnchor() {
    HTMLAnchorElement.call(this);
}

CustomAnchor.prototype.connectedCallback = function () {
    console.log('anchor added to dom');

    this.addEventListener('click', 
        function(e) {
            console.log('test');
            e.preventDefault();
            var result = confirm('Confirmed!');
        }
    );
};

window.customElements.define('custom-anchor', CustomAnchor, {extends: 'a'});

这是创建元素并将其添加到 DOM 的代码：

var el1 = document.createElement("a")
el1.setAttribute("is", "custom-anchor")
el1.setAttribute("href", "http://www.google.com/")
el1.text = "Go to Google"
document.body.appendChild(el1)

这是 DOM 中显示的内容，看起来是正确的：

<a is="custom-anchor" href="http://www.google.com/">Go to …

我有两个网络组件，一个类似于列表项，另一个是容器。在列表项中有一个按钮，它调度 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() …

我基本上需要将一个值传递给我的 Web 组件，然后我将对其执行一些随机操作，现在我想将该新值传递回我的 React 组件。我怎么做？

function MyReactcomp() {
   const [state, setState] = useState("Justin is cool");
   return (
        <div className="Wrapper">
           <customweb-component state={state} />
        </div>
    );
}

现在在自定义网络组件中，我将状态更改为“不，你不！！”。如何将此值从我的 Web 组件传递回我的 Rea t 组件？我知道我可以向下传递函数，因为你只能向下传递字符串

CustomElement.svelte

<svelte:options tag="custom-element" />

<script>
  import { onMount, onDestroy } from "svelte";

  onMount(() => {
    window.addEventListener("scroll", funcRef);
  });

  onDestroy(() => {
    window.removeEventListener("scroll", funcRef);
  });

  const funcRef = (event) => {
    doWhatever();
  }
</script>

实际上，当自定义元素从文档中删除时，应该删除事件处理程序，但事实并非如此。我缺少什么？

问题已更新

我正在尝试将Pinia的商店与使用Vue.js创建的 Web 组件一起使用，但控制台中出现以下错误：

[Vue 警告]：在 <HelloWorld.ce msg="message"> 处找不到注入“Symbol(pinia)”

我有一个非常简单的例子。

1. 主要.ts

import { defineCustomElement } from 'vue'
import HelloWorld from './components/HelloWorld.ce.vue'

const ExampleElement = defineCustomElement(HelloWorld)
customElements.define('hello-world', ExampleElement)

2. 商店.ts

import { defineStore, createPinia, setActivePinia } from "pinia";

setActivePinia(createPinia());

export const useCounterStore = defineStore('counter', {
  state: () => ({
    counter: 0,
  }),

  actions: {
    increment() {
      this.counter++;
    },
  },
});

3. HelloWorld.ce.vue

<script setup lang="ts">
import { ref } from 'vue'
import { useCounterStore } from '../store.ts'

defineProps<{ msg: string …

select我正在 Vanilla JS 中制作一个 Web 组件，它在后台使用隐藏，在前面使用divand ul>li。从 api 等获取数据变得有点复杂，所以我转向 Svelte 来简化它并使其更具可读性。

现在我已经尝试了 2 天将该组件导出为 IIFE。我只是似乎不知道怎么做。我可能错了，但我认为这是 Svelte 的主要功能之一 - 制作可以在任何地方使用的可重用组件。制作它是很容易的部分，但现在我想加载它并直接在浏览器中使用它（使用<script src=""></script>）。我想这应该很容易吧？

我使用 Svelte 3 (3.57.0) 和 Vite 4 (4.2.1)，并且我尝试使用 SvelteKit 和框架npm create svelte创建一个库项目。npm init vitesvelte

我已经阅读了相当多的 Vite 和 Svelte 文档，但感觉不知所措，而且我似乎找不到有效的配置。

有谁知道如何在 Svelte 中将组件编译为 IIFE？