标签: native-web-component

现在，如果您遵循自定义元素spec的v1的确切规范，则不可能在不支持类的浏览器中使用自定义元素。

有没有一种方法可以创建v1自定义元素而不使用类语法，以使它们在Chrome，FireFox和IE11中完全起作用。另外，由于IE11不对自定义元素提供本机支持，所以我假设我们可能需要使用一些pollyfills，那么，为了在IE11中实现此功能，我们需要哪些polyfills或库？

我已经弄乱了Polymer 2，Polymer 3和Stencil，但是它们对于我们要创建的某些东西来说有点繁重。

这个问题似乎是在正确的轨道上，但是让它在IE11中工作时遇到了一些麻烦，因此，如何才能在IE11中使用Reflect.construct来实现自定义元素？

我已按照此处的指南使用纯JS / HTML / CSS创建了一个本地自定义元素作为Web组件。

现在我想知道如何为这种组件编写单元测试。有一个出色的库Web组件测试器，但我相信它仅适用于用聚合物创建的组件。

由于我的组件不是聚合物纤维网组件，而是天然的组件，因此有人可以为我指明进行单元测试的正确方向。

在connectedCallback()我的自定义元素的方法中，textContent它作为空字符串返回。

本质上，我的代码可以归结为以下内容...

class MyComponent extends HTMLElement{
    constructor() {
        super()

        console.log(this.textContent) // not available here, but understandable
    }           

    connectedCallback() {
        super.connectedCallback() // makes no difference if present or not

        console.log(this.textContent) // not available here either, but why?!
    }
}

customElements.define('my-component', MyComponent);     

还有HTML ...

<my-component>This is the content I need to access</my-component>

从阅读方面看，connectedCallback()这听起来好像是在将元素添加到DOM后就被调用了，所以我希望textContent属性应该是有效的。

我正在使用Chrome 63，如果有帮助...

我正在构建用于教育目的的普通 Web 组件。这是我的自定义复选框。

class Checkbox extends HTMLElement {
    constructor() {
        super();
        this.shadow = this.attachShadow({mode:'open'});
        this.shadow.innerHTML = "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path /></svg><label></label>";
        this._checked = false;

        this.addEventListener("click", this.onClickHandler.bind(this));
    }

    set checked(value) {
        if(value != this._checked) {
            this._checked = value;
            this.update();
        }
    }

    get checked() {
        return this._checked
    }

    onClickHandler(event) {
        this.checked = !this.checked;
    }

    update() {
        let svg = this.shadow.querySelector("svg");

        if(this._checked)
            svg.querySelector("path").setAttribute("d", "M19 0h-14c-2.762 0-5 2.239-5 5v14c0 2.761 2.238 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-8.959 17l-4.5-4.319 1.395-1.435 3.08 …

我需要找到一种非常高效的方法来确定自定义元素或其任何父元素是否具有 display: none;

第一种方法：

checkVisible() {
  let parentNodes = [];
  let el = this;
  while (!!(el = el.parentNode)) {
    parentNodes.push(el);
  }
  return [this, ...parentNodes].some(el => el.style.display === 'none') 
}

有什么比这运行得更快的吗？这甚至是一种安全的方法吗？

我需要这个的原因：我们有一个<data-table>自定义元素（原生 webcomponent），它在它的connectedCallback(). 我们有一个应用程序，在单个页面中包含 20-30 个自定义元素，这导致 IE 11 需要大约 15 秒才能呈现页面。

我需要延迟那些<data-table>最初甚至不可见的组件的初始化，所以我需要一种方法来测试connectedCallback()元素是否可见（如果它在最初未显示的 18 个选项卡之一中，则不是）。

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

索引.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>

我在一家拥有大型 webcomponents 目录的大公司中使用 Polymer 1 和 2 工作了大约一年，我相信 webcomponents 非常有用。我知道像https://adamsilver.io/articles/the-problem-with-web-components/这样的“缺点想法” 。

现在我正在深入研究如何有效地使用 vanilla webcomponents。我刚开始的前提是使用 vanilla web-components 将有助于与 webcomponents 改进保持一致（我无法为这样的想法辩护 - 我现在只是假设这一点）。然后我试图创建一个堆栈来使用 vanilla webcomponents。

在寻找推荐的测试方法时，我访问了https://open-wc.org/testing，我认为它的目的是在不添加特定框架的情况下促进良好实践（来自其网站：“Open Web Components is a community-effort,独立于任何框架或公司”）。这正是我正在寻找的：一种良好的实践和众所周知的推荐，类似于我们对来自 micorservice.io 的微服务（这只是一个类比）。

尝试使用我在 package.json 中得到的脚手架：

  "dependencies": {
    "lit-html": "^1.0.0",
    "lit-element": "^2.0.1"
  }

所以，我的主要问题是：为什么要为 webcomponent 使用 lit-html？

围绕我的主要问题的有用疑问，据我所知，lit-html 是由谷歌和聚合物团队赞助的框架。这不是以某种方式迫使我使用 polifylls 在所有浏览器中运行吗？假设我不关心浏览器不符合 webcomponents，为什么我需要一个框架？

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

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，也会解析该内容。