标签: web-component

state 和 setState lit-element 在哪里？

来自反应背景，我想知道 lit-element 中的 state 和 setState 等效项在哪里，我在 lit-element 文档中找不到任何有用的内容。是私有财产吗？或者requestUpdate？

web-component polymer lit-element lit-html

Edd*_*erd

lucky-day

5
推荐指数

1
解决办法

1883
查看次数

vue.js 注册Web组件

我正在使用 vue.js 并使用 stencil.js 创建了一个 web 组件。我不想将 Web 组件发布到 npm，这就是为什么我只是将其包含在我的 vue 项目的 src/assets 目录中。

但是我收到错误

[Vue warn]: Unknown custom element: <my-component> - did you register the component correctly? For recursive components, make sure to provide the "name" option. 
    found in ---> 
        <App> at src/app.vue
            <Root>

Run Code Online (Sandbox Code Playgroud)

它与我在资产目录中已有的另一个组件一起工作没有问题。

它也无助于使用

Vue.config.ignoredElements = ['my-component'];

Run Code Online (Sandbox Code Playgroud)

因为当我在本地运行该组件时，该组件仍然是空的。

感谢您的帮助！

web-component vue.js vuejs2 stenciljs

App*_*cow

lucky-day

5
推荐指数

1
解决办法

752
查看次数

样式不适用于 Safari/Firefox 中的 LitElement

2020 年 1 月更新：应该使用https://github.com/Polymer/lit-element/pull/712进行修复

如果在组件的第一次渲染期间从方法undefined返回，然后与一些 css 类一起返回 lit-html TemplateResult（样式在静态 getter 方法中定义），则不会应用这些样式。renderLitElementstyles

有一个简单的JSFiddle可以重现此问题。

如果渲染方法在组件第一次渲染后返回lit-html TemplateResult，则<style>标签存在于shadow DOM中。

如果渲染方法undefined在第一次渲染后返回，<style>则标签在 Shadow DOM 中丢失，并且永远不会添加，即使在下一次渲染调用中 lit-html TemplateResult 也是如此。

对于Chrome来说它工作得很好。Safari和Firefox会重现该问题。

更新：应该用https://github.com/Polymer/lit-element/pull/712修复

html javascript css web-component lit-element

Pav*_*lov

2020 02-12

5
推荐指数

1
解决办法

2163
查看次数

将 WebComponents 作为内容插入 Monaco 编辑器

有没有办法将 WebComponent 插入 Monaco 编辑器？我希望能够将 HTML WebComponent 拖放到编辑器上，并且 WebComponent 将是交互式的。例如，我可以将时间戳组件拖放到编辑器中，看起来像 [00:00:00.000]，但小时、分钟、秒等是交互式的，即可以使用向上和向下箭头。在幕后，我知道 Monaco 是一个隐藏的文本区域，因此我想从组件中公开一些类似于 insideText 值的内容，以便 Monaco 只接收文本。这是一个方向 - 在重新加载时，我希望它能够检测时间戳值并渲染出使用这些值预设的 Web 组件。

手指交叉！如果这是不可能的 - 我已经看到摩纳哥有 IContentWidgets 并且想知道这是否可以使用？

editor web-component monaco-editor

sjg*_*jgj

lucky-day

5
推荐指数

0
解决办法

187
查看次数

微前端路由：Web 组件/角度元素中的角度路由器

我正在使用微前端架构创建一个 UI 应用程序。我有三个应用程序：1.micro -app-a（用角度编写）2.micro -app-b（用角度编写）3.shell应用程序（用角度编写）

我的微应用程序-a有自己的角度路由器来管理路由，类似地，微应用程序-b也有自己的角度路由器，它们单独按预期工作，但当我将这两个微应用程序组合为一个时，我无法管理路由Web 组件（@angular/element）集成到单个 shell 应用程序中。我不知道如何管理路由。请有这方面知识的人帮助我。:)

routes web-component angular angular-elements micro-frontend

Atu*_*ul

lucky-day

5
推荐指数

0
解决办法

1935
查看次数

如何在 Web 组件中使用 Material Design 图标？

看起来 mdi 无法在 Web 组件内工作，或者我错过了什么？

我想开发一个封装其依赖项的 Web 组件，将链接添加到父文档是可行的，但它违反了初衷。

<html>
<body>
<x-webcomponent></x-webcomponent>
<script>
customElements.define(
  "x-webcomponent",
  class extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({ mode: "open" });
      this.shadowRoot.innerHTML = `
        <style>@import url('https://cdn.materialdesignicons.com/4.9.95/css/materialdesignicons.min.css');</style>
        <span class="mdi mdi-home"></span>
      `;
    }
  }
);
</script>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

https://codepen.io/Jamesgt/pen/MWwvJaw

web-component css-import native-web-component material-design-icons

Jam*_*sgt

2020 03-03

5
推荐指数

1
解决办法

5655
查看次数

拥有许多 Shadow DOM 对浏览器性能是好是坏？

Shadow DOM允许我们在文档中创建独立的 DOM 树，这些 DOM 树有自己的节点树，（或多或少）独立的样式管理，并且在某种程度上，仅“渲染”到父 DOM 树中。

我想知道大规模的性能影响。与将所有内容都放在一个大文档中相比，在一个页面上拥有许多 Shadow DOM / Shadow root 是好是坏？

一方面，我猜想，浏览器可能会受益于较小的（子）DOM 树以及在渲染仅包含实际的节点和样式的隔离 Shadow DOM 的内容时必须评估的较少的样式规则。与其内容相关。这可能会对计算工作量产生积极影响。

另一方面，在渲染时额外的“类似文档”元数据或 DOM 树的“合并”是否会减慢浏览器速度或显着增加内存使用量？

web-component shadow-dom

Joh*_*ofy

lucky-day

5
推荐指数

1
解决办法

1300
查看次数

Angular Element - 将 Shadow DOM 设置为关闭

当使用默认设置创建角度元素时，影子根处于打开状态。有谁知道是否可以创建具有封闭阴影根的角度元素？

web-component angular angular-elements

moe*_*ley

lucky-day

5
推荐指数

0
解决办法

756
查看次数

Shadow dom 内的 FontAwesome svg

我正在尝试在 Web 组件中使用 font awsome js/svg 库，但图标不会显示。这可能吗？

我正在尝试在现有的 webforms 项目中实现一个角度组件，而无需 css 和脚本“流血”，关于如何做到这一点还有其他建议吗？iframe 不是一个选项。

    <html>
    <head>
        <script src="https://polygit.org/components/webcomponentsjs/webcomponents-loader.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js" defer>
        </script>
        <script>
            customElements.define('my-holder', class extends HTMLElement {
                constructor() {
                    super();

                    console.log("constructor");
                    let shadowRoot = this.attachShadow({
                        mode: 'open'
                    });

                    const t = document.querySelector('#holder');
                    const instance = t.content.cloneNode(true);

                    shadowRoot.appendChild(instance);
                }

                connectedCallback() {
                    console.log("callback");
                }
            });
        </script>
    </head>

    <body>
        <div id="outside">
            light dom
            <div class="fa-4x">
                <span class="fa-layers fa-fw" style="background:MistyRose">
                    <i class="fas fa-circle" style="color:Tomato"></i>
                    <i class="fa-inverse fas fa-times" data-fa-transform="shrink-6"></i>
                </span>
            </div>
        </div>

        <template id="holder"> …

Run Code Online (Sandbox Code Playgroud)

javascript webforms web-component font-awesome angular

use*_*186

2020 05-04

5
推荐指数

1
解决办法

2553
查看次数

在Web组件的disconnectedCallback上删除事件侦听器的原因

我在网上看到了一个删除 Web 组件 dom 中按钮的事件侦听器的示例disconnectedCallback：

class MyComponent extends HTMLElement {
    constructor() {
        this.attachShadow({ mode: "open" });
        this.shadowRoot.innerHTML = "<button>Click</button>";
    }

    myEvent() {
        ...
    }

    connectedCallback() {
        this.shadowRoot.querySelector("button").addEventListener("click", this.myEvent.bind(this));
    }

    // Removes event here:
    disconnectedCallback() {
        this.shadowRoot.querySelector("button").removeEventListener("click", this.myEvent.bind(this));
    }
}

Run Code Online (Sandbox Code Playgroud)

这样做有理由吗？由于按钮不在 dom 中，因此触发时不会出现问题吗？是否存在内存泄漏问题？它没有列在Web 组件最佳实践的事件部分中。我可以理解窗口上是否有事件侦听器等，但不明白如果事件是由未连接的东西触发的，会产生什么影响

web-component

kal*_*ave

lucky-day

5
推荐指数

1
解决办法

1928
查看次数