标签: custom-element

假设我要创建一个自定义html元素,例如:

<video-container>
  <video></video>
</video-container>

所以我创建了这样一个模板:

<div class="wrapper">
   etc..
   <content></content>
</div>

然后我通过HTML元素原型将它附加到页面createdCallback.

内部的回调我希望能够给听众附加到video元素,所以我可以做的东西play,pause等等.如果有无论如何访问传入的视频标签目前尚不清楚给我.我可以接触到的content标签,但它不显示任何子节点.这可能吗？

我可以访问视频元素,如果我只是抓取整个文档并获取视频元素,但这很难看,因为我希望能够只获取当前自定义元素范围内的视频标记.

我在Aurelia创建了一个自定义元素.

import {bindable, inject, customElement, bindingMode} from 'aurelia-framework';
import 'select2';
import * as $ from 'jquery';
import {BindingSignaler} from "aurelia-templating-resources";

@customElement('select2')
@inject(Element, BindingSignaler)
export class Select2CustomMultiselect {
    @bindable name = null;    // name/id of custom select
    @bindable selected = null;  // default selected values
    @bindable ({defaultBindingMode: bindingMode.oneWay, attribute:"options"}) source:Array<{id:number, name:any}>= [];   // array of options with id/name properties
    @bindable placeholder = "";
    @bindable allow_clear = true;
    private $select2: $;

    constructor(private element, private signaler:BindingSignaler) {
    }

    attached() {
        let $select = …

我有一个my-checkbox包含复选框,标签,样式等的自定义元素.当切换该复选框时,我CustomEvent在构造函数中定义了一个命名检查,如下所示:

constructor(){
   super();
   this._shadowRoot = this.attachShadow({mode: 'open'});
   this.checkEvent = new CustomEvent("check", {
     bubbles: true,
     cancelable: false,
   });
 }

切换复选框时,我会调度该事件:

toggleCheckbox(){
  this.dispatchEvent(this.checkEvent);
  console.log(this.checkEvent);
  ...
}

我推断这个事件正在被调度,因为console.log的内容显示了CustomEvent的签名

我有另一个my-checkreport包含my-checkbox的自定义元素,应该对"check"事件作出反应.我在连接的回调函数中定义了一个事件监听器my-checkreport

connectedCallback(){
  ...
  this.addEventListener("check", function (e) {
        console.log('listend to check event');
        console.log(e);
    });
 }

但是,这个eventListener永远不会触发,似乎永远不会"听到"在my-checkbox组件中调度的"check"事件.我尝试在构造函数中添加此侦听器并获得相同的结果.

我有什么想法我做错了吗？

背景:我这样做是为了使这些元素可以组合.我还读过,开发Web组件的最佳实践是"使用自定义事件将信息传递出组件......"

我需要建立一个应该需要工作与两个规格，组件custom elements spec v0它得到了过时和custom elements spec v1，最新的稳定版本。

如果我使用custom elements v0规范构建组件，则某些应用程序将因为使用polymer 2和高于它们而面临问题，而与polymer 1无法使用custom elements v1规范的应用程序将面临同样的问题。

我无法控制更改Polyfill的应用程序，某些应用程序必须使用支持旧规范的Polyfill，而某些应用程序需要使用新的Polyfill。

我正在寻找一个可靠的解决方案，以结合这两个规范以在所有应用程序中运行我的自定义元素，而不管polyfills版本如何。我可以在组件中添加任何polyfill或snippet，以便它们可以在任何地方运行，但在我的研究中没有找到任何支持这两种规范的库或polyfill。

我打算编写一个适配器，该适配器可以结合下面提到的用于映射的回调的两个规范，对此思想的投入将不胜感激。

connectedCallback(){
    this.attachedCallback();
}

我尝试使用stenciljs，但它只能与最新版本的自定义元素规范一起使用。我还没有找到任何方法来对其进行调整以使其与早期规范兼容。

请针对上述情况提出一些可行的替代方案和可行的解决方案。

我在Preact 中使用自定义元素又名 web 组件。问题是 Typescript 抱怨元素没有被定义在- 在这种情况下是一个元素：JSX.IntrinsicElementscheck-box

<div className={styles.option}>
    <check-box checked={this.prefersDarkTheme} ref={this.svgOptions.darkTheme}/>
    <p>Dark theme</p>
</div>

错误信息（省略路径）：

ERROR in MyComponent.tsx
[tsl] ERROR in MyComponent.tsx(50,29)
      TS2339: Property 'check-box' does not exist on type 'JSX.IntrinsicElements'.

我遇到了以下可能的解决方案，但不幸的是无法正常工作：

1. /sf/answers/4021468951/ - 这是一个与问题无关的答案，但它涵盖了我的问题

我尝试将以下内容添加到我的typings.d.ts文件中：

ERROR in MyComponent.tsx
[tsl] ERROR in MyComponent.tsx(50,29)
      TS2339: Property 'check-box' does not exist on type 'JSX.IntrinsicElements'.

我的 IDE 使导入部分变灰，IntrinsicElements这意味着它没有被使用 (?!) 并且无论如何它都不起作用。我仍然收到相同的错误消息。

2. /sf/answers/3879734491/ - 同样为了反应，我试图将它“转换”为 preact，我得到了与 1 相同的结果。

我什至在squoosh项目中找到了一个由 google 维护的文件 …

我正在尝试从谷歌开发者网站的例子,我得到错误:"TypeError:非法的构造函数.有什么问题,如何解决它？

class FancyButton extends HTMLButtonElement {
  constructor() {
    super(); // always call super() first in the ctor.
    this.addEventListener('click', e => this.drawRipple(e.offsetX,e.offsetY));
  }

  // Material design ripple animation.
  drawRipple(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('transitionend', e => div.remove());
  }
}

customElements.define('fancy-button', FancyButton, {extends: 'button'});
let button = new FancyButton();
button.textContent = 'Fancy button!';
button.disabled = true;

标题是自我解释的.如果我得到多个简短答案,我会在最后编译它们.

在使用v1甚至v0之前,请参阅caniuse.com.

我正在尝试为input元素创建一个本机Web组件.我希望该组件具有自定义验证功能,类似于聚合物的纸张输入自定义验证器功能.我不确定我是否可以将自定义验证器函数作为属性传递给(web组件)输入元素的实例.任何建议,将不胜感激.

我正在尝试在 svelte 3 中创建自定义元素（Web 组件）。我找不到任何方法来从 css 设置嵌套组件的样式。Svelte 在将样式注入到<style>ShadowDOM 内部之前删除它们。

问题是我想在我的根元素中嵌套组件。例如：

• RootComponent（纤细的自定义元素）
  • (进口) FooComponent
  • (进口) BarComponent

如此处所述：svelte-custom-element

导入到 custom-element 的所有组件都必须将编译器选项设置为<svelte:options tag="component-name" />.

使用此选项设置嵌套组件按预期工作并注入根元素 ShadowDOM。问题是styles在嵌套组件中定义的没有被注入。此问题的解决方法是将它们<style>作为 ShadowDom 中的全局样式注入到 root 的元素中。（不）幸运的是，当自定义元素尚不存在时，svelte 会在编译期间自动删除所有未使用的样式。

我的目标是使用 svelte 创建 web 组件，然后在 svelte 之外将其用作本机 web 组件。

这是REPL

正如Condutry所写的那样，自定义元素在 REPL 上并不真正起作用：

REPL 中的编译器选项实际上并不影响运行的代码，只是影响显示的代码。因此，启用 customElement > 并不意味着您正在构建和运行 Web 组件

所以它更像是一个代码示例而不是一个工作示例。

1. 我想知道是否有另一种方法来创建具有嵌套组件和适当样式的苗条自定义元素。
2. 有没有办法禁用删除未使用的 css？

https://imgur.com/a/zZia566

从<div class="nested">开始从 Nested.svelte 导入的嵌套组件。

<style>元素应该.nested注入类，但它被 svelte 编译器删除。

使用 svelte 创建 Web 组件，当组件的属性更改时，我需要运行一些代码。

我想出的是以下模式。

<script>
    export let test = "default value";

    $: {
        testIsChanged(test);
    }

    function testIsChanged(newValue) {
        console.log(newValue);
    }
</script>

The value of test is {test} 

这是这样做的方法吗？或者我错过了什么？