标签: web-component

I need to disable PostList component in its initial state.

import React from 'react';
import PostList from './PostList';

const App = () => {
    return (
        <div className="ui container">
             <PostList />
        </div>
    );
};

export default App;

Whats the best way to disable (and grey out) a component? Possible solutions are to pass a value as props and then apply it to a ui element, However please keep in mind that PostList may have inner nested components as well. Please …

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

我的第一个选择：

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

我在一家拥有大型 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，为什么我需要一个框架？

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

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

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

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

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

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

我正在创建一个包装我一直在使用的画布库的组件，以使其在我的一些应用程序之间可移植，并使其功能/样式在应用程序之间保持一致。

问题是，库的一部分要求我将画布元素作为类的参数传递。

是否可以从模板类中选择元素？到目前为止，我设法完成它的唯一方法是关闭 shadow DOM，这有点违背了目的。

我有两个 Lit 元素 Web 组件 - 一个是units-list，其中包含许多units-list-item元素。这些units-list-item元素有两种不同的显示模式：紧凑和详细。因为列表元素支持无限滚动（因此可能包含数千个单位），我们需要任何在两种模式之间切换的机制来尽可能提高性能。

这就是为什么我认为一个理想的解决方案是:host-context()在units-list-item元素的样式中使用伪选择器，因为这样每个units-list-item元素都可以通过更改应用于祖先的类（这将在阴影内）在两种显示模式之间切换units-list元素的DOM ）。

详细说明，这里是units-list元素的相关标记。请注意，“触发器”类正在应用于#list-contentsdiv，它是units-list模板的一部分。

<div id="list-contents" class="${showDetails ? 'detail-view table' : 'compact-view table'}">
    ${units.map(unit => html`<units-list-item .unit="${unit}"></units-list-item>`)}
</div>

如您所见，该showDetails标志控制是将“detail-view”还是“compact-view”类应用于包含所有units-list-item元素的 div 。这些类肯定被正确应用。

这是units-list-item元素的完整渲染方法（删除了不必要的标记）：

render() {
    const {unit} = this;
    // the style token below injects the processed stylesheet contents into the template
    return html`
        ${style}
        <div class="row compact">
            <!-- …

如果之前定义了属性，则 WebComponents 属性设置器不会触发。如下：

<foo-bar id='ele1'></foo-bar>
<foo-bar id='ele2'></foo-bar>
<script>
  ele1.foo = 'hello';

  class FooBar extends HTMLElement {

    set foo(val) {
      console.log(`set ${this.id} to ${val}`);
      this._foo = val;
    }

    get foo() {
      return this._foo
    }
  }

  customElements.define('foo-bar', FooBar);

  setTimeout(() => {
    ele1.foo = 'world';
    ele2.foo = 'world';

    console.log(`ele1.foo is ${ele1.foo}`);
    console.log(`ele2.foo is ${ele2.foo}`);
  }, 1000);
</script>

控制台输出（set ele1 to world不是输出`）：

set ele2 to world
ele1.foo is world
ele2.foo is world

所以我必须Object.defineProperty这样观察属性：

set ele2 to world
ele1.foo is world …

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

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