标签: web-component

我有一个聚合物元素,里面有一个costum元素.我想点击它时删除所有内容(父级和子级).

问题是,每次我关闭父元素的实例时,我都会收到错误.我认为这与我正在删除一个内部元素的元素有关.

如何正确删除它？

这是方法代码:

closeWindow: function (event, detail, sender) {
    this.firstChild.remove();
    this.remove();
}

这是我遇到的错误:

Uncaught TypeError: Cannot read property 'length' of undefined

这是错误的图像:

我正在编写一个旨在互动的自定义Web组件.如何告诉浏览器此自定义组件应该获得焦点？

我希望我的自定义元素......

• 可以集中(通过标签导航);
• 可以在专注时接收按键;
• 可以通过:focus伪选择器匹配.

我没有使用任何外部库,只使用简单的HTML5 API.

我一直是一个很长的Angular 1.x用户,现在我正在使用Angular 4创建一个新的应用程序.我仍然没有掌握大多数概念,但我终于有一些非常好的工作.但是,我有一个问题,我需要使用Leaflet在Marker的弹出窗口中显示Angular 4组件(尽管在1.x中我只是使用了指令).

现在,在Angular 1.x中我可以使用$ compile对模板中的指令(`<component>{{ text }}</component>`)里面的按钮等等它会起作用,但是Angular 4与它的AoT完全不同,并且在运行时编译似乎真的很棒很难,并没有简单的解决方案.

我在这里问了一个问题,作者说我可以使用指令.我不确定这是否是正确的方法,甚至不知道如何将我自己的代码与他提出的解决方案混合...所以我做了一个基于npm的小项目,Angular 4和Leaflet已经设置好,以防你知道如何帮助我还是想试一试(我非常感谢!).我一直在敲打这个可能已经一个星期了,我真的厌倦了尝试了很多替代品而没有成功:(

这是我在GitHub中的回购链接:https://github.com/darkguy2008/leaflet-angular4-issue

我们的想法是在Marker中生成PopupComponent(或类似的东西),代码可以在src/app/services/map.service.ts第38行找到.

提前致谢!:)

编辑

我设法解决了:)看到标记答案的细节,或这个差异.有一些警告,Angular 4和Leaflet的程序有点不同,它不需要那么多的变化:https://github.com/darkguy2008/leaflet-angular4-issue/commit/b5e3881ffc9889645f2ae7e65f4eed4d4db6779b

我还从这里解释的解决方案中创建了一个自定义编译服务,并上传到相同的GitHub存储库.谢谢@yurzui!:)

我正在构建一个独立的 Vue 组件并在另一个 Vue 项目中使用它。

构建组件：

vue build --target wc --inline-vue --name user-menu user-menu.vue

到目前为止，它是一个简单的组件，没有功能，只有标记。

然后，在主项目的package.json中：

  "devDependencies": {
    "user-menu": "git+https://........user-menu.git",

然后，在 main.js 中：

import Vue from "vue";
import UserMenu from "user-menu"
....
Vue.use(UserMenu);
const app = new Vue(config).$mount("#root");
window.app = app;
Vue.use(UserMenu);

它说：

user-menu.js?e2ea:1446 Uncaught ReferenceError: Vue 未定义

连续

module.exports = Vue;

但Vue CLI 3 文档说：

在Web组件模式下，Vue是外部化的。这意味着即使您的代码导入了 Vue，该捆绑包也不会捆绑 Vue。该包将假设 Vue 在主页上作为全局变量可用。

知道如何解决这个问题吗？

我们能否将 Blazor 组件渲染为独立的 DOM 片段，或者以其他方式将其用作普通 HTML/JS 页面中的标准 Web 组件？

从 Blazor 架构的角度来看，这可能是一个天真的问题。到目前为止，我还不是 Blazor 专家，但我认为它对于遗留 Web 应用程序的增量“棕地”现代化来说可能是一种有用的技术。我很惊讶这似乎没有得到官方支持。

为了说明这一点，请考虑这个简单的 Web 组件示例，它呈现一个自定义元素<date-info>：

// define a custom web component
customElements.define("date-info", class DateInfo extends HTMLElement {
  constructor() {
    super();
    // create an "open" (vs "closed") shadow DOM, 
    // i.e., accessible to the outside JavaScript
    this.attachShadow({ mode: "open" });
  }

  async connectedCallback() {
    console.log(`${this.constructor.name}.${this.connectedCallback.name} called`);

    // get the content from the server, 
    // this could be a Blazor component markup
    try {
      const response …

我的团队已经使用 Flutter/Dart 创建了一个网页。它有效，太棒了！但现在要求该网页应通过Web组件的方式集成到合作伙伴网站中。这意味着我们应该将 Flutter 项目构建为 Web 组件而不是网页。

有谁知道我们如何才能实现这一目标？多谢！

我想使用 Angular Elements 创建一个 Web 组件库，该库具有默认模板，但允许开发人员覆盖输出。

例如，考虑一个搜索结果组件。我可能有一个如下所示的默认模板：

<h1>Search results for: {{query}}</h1>

但开发人员可能希望将输出更改为此（作为任意示例 - 它需要灵活）：

<h1>You searched for <strong>{{query}}</strong></h1>

我的第一个想法是简单地使用ng-content这样的：

<search-results>
    <h1>You searched for <strong>{{query}}</strong></h1>
</search-results>

然而，这不起作用，并且会直接输出{{query}}.

然后我发现我可以TemplateRef在组件上添加一个输入参数并传入一个ng-template可以解析表达式的元素。这在 Angular 应用程序中运行良好，但我不确定如何使用 Angular Elements 生成的已编译 Web 组件在 Angular 上下文之外执行此操作。

谁能解释一下如何做到这一点？

下面的大多数参考资料都提到 Safari 部分支持 Web 组件。

详细来说，Safari 桌面版和 Safari iOS 不支持哪些 Web 组件功能？

是否有关于该问题的技术文档或规格？

https://developer.mozilla.org/en-US/docs/Web/Web_Components

https://caniuse.com/shadowdomv1

我想将我在 vue 项目中使用的一些组件导出为 web 组件，以便能够在其他非 vue 项目中使用它们。我看到 vue 支持这一点，并且它导出 web 组件，但我遇到的问题是 css - 使用导出的 web 组件时它不包含（或不可用）。

为了使这种情况易于重现，我使用创建新的 vue js 3 项目时生成的默认代码。我想要导出为 Web 组件的组件是我们在新项目中获得的默认 App.vue。

重现步骤：

1. 创建一个标准 vue （我有 3.2）项目，使用 typescript 和更少。
2. 像这样修改 main.ts：

    import { createApp, defineCustomElement } from 'vue'
    import App from './App.vue'

    createApp(App).mount('#app'). // this can be commented out

    const customApp = defineCustomElement(App);
    window.customElements.define('app-component', customApp);

3. 在 package.json 中添加新脚本：

    "build:wc": "vue-cli-service build --target lib --name AppComponent src/main.ts"

4. 修改 vue.config 以将样式包含在导出的包中：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({ …

问题已更新

我正在尝试将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 …