标签: custom-element

当我在 Chrome 中检查我的自定义元素时，元素的样式和所有内部元素在样式面板中显示为“用户代理样式表”。

我在每个类别中使用了几个聚合物的铁图标,并且不希望导入整套.是否有可能(或硫化工具/插件)仅导入我需要的？并有一个较小的HTML文件服务？

我正在重写我的Polymer 1.0应用程序Polymer 2.0(和TS),我遇到了一个问题.如何将事件从一个元素转移到另一个元素？我之前使用的是iron-signal,现在我正在尝试使用CustomEvent,但因为ShadowDOM事件没有达到元素.

元素的层次结构大致如下:

1 {2 {3 {4}}}}.

我需要从抛出一个事件element 1来element 4,而在另一种情况下,反之亦然.

我怎样才能做到这一点？只通过window.AddEventListener？

有没有更好的方法将槽传递给深度嵌套的组件？

索引.html

  <outer-comp>
    <span slot=foo>Lorem ipsum</span>
  </outer-comp>

外部组件：

  <inner-comp>
    <slot name=foo slot=foo></slot>
  </inner-comp>

内部组件：

  <slot name=foo></slot>

我正在尝试创建自定义元素...

我的第一个选择：

JS：

class AwesomeButtonComponent extends HTMLButtonElement {
    constructor() {
        super();

        this.addEventListener('click', () => {
            alert('Great job!');
        });
    }
}

customElements.define('awesome-button', AwesomeButtonComponent, {extends: 'button'});

HTML： <awesome-button>CLICK ME</awesome-button>

JS：

customElements.define('awesome-button', Object.create(HTMLButtonElement.prototype), {
       extends: 'button'
    });

HTML： <awesome-button>CLICK ME</awesome-button>

08.07.2019和<button is="awesome-button">CLICK ME</button>

我的每一次尝试都变成了一个简单的元素。如何正确创建从本机扩展的自定义元素？

js、vue、html5

我读的最佳做法的文章在这里。我遇到了以下几行：

在加载定义之前，开发人员可能会尝试在元素上设置属性。如果开发人员使用一个框架来处理加载组件、将它们插入到页面中并将它们的属性绑定到模型，则尤其如此。

解决此问题的建议解决方案是：

_upgradeProperty(prop) {
  if (this.hasOwnProperty(prop)) {
    let value = this[prop];
    delete this[prop];
    this[prop] = value;
  }
}

我一直在尝试了解会发生这种情况的场景，并尝试了解这段代码如何解决这个问题。我试图找到任何参考资料，但无法找到任何类似的东西。

请有人解释这种情况以及我们在这里试图解决什么问题。

看看这个简单的例子 （不要理会这个，去编辑）

class MyElement extends HTMLElement {

  customProperty = "something";

  constructor() {
    super();

    console.log("My Element Constructor");
  }
}

customElements.define("my-element", MyElement);

document.body.innerHTML = "<my-element></my-element>";
var myElement = document.querySelector("my-element");
console.log(myElement); // 
console.log(myElement.customProperty); //

输出：

<my-element>
undefined
My Element Constructor

在主调用堆栈完成之前，不会调用自定义元素构造函数（但它是 HTMLElement 构造函数）。这是预期行为还是错误？

谢谢！

编辑

为了简化我的实际情况，我提出了前面的示例，但我现在认为它不适合说明我的问题（该示例确实可以正常工作）。感谢@connexo的回答，我能够隔离问题（这是一个具有许多依赖项的复杂项目）并将其转换为以下示例：

<my-element>
undefined
My Element Constructor

由于某种原因，当模板元素的内容被添加到shadowRoot时，这些元素将不会被解析，直到shadowRoot被添加到DOM。但是当直接修改shadowRoot的innerHTML时，即使shadowRoot不属于DOM，也会解析该内容。