web-component 相关问题

Web组件是使用本机代码或第三方库创建的可重用客户端元素。

WEB组件 - 影子DOM获取选择

javascript typescript vite web-component native-web-component

回答 1 投票 0

使用模板将Web组件注入Chrome扩展

javascript google-chrome-extension web-component stenciljs

回答 1 投票 0

为了防止第三方饼干阻塞的范围，对客户的努力很少？

我在

javascript web cookies iframe web-component

回答 0 投票 0

但似乎没有起作用。我正在使用Chrome 28遵循此介绍

javascript html web-component html-imports

回答 6 投票 0

javascript Web组件：this.shadowroot.queryselector（）总是返回null

CustomElements.defi ... 我正在用香草JavaScript制作一个网络组件，如下所示： </desc><question vote="0"> <p> </p><code><template id="TEMPLATE_UPLOADER"> <div>Try Query Me</div> </template> <script> customElements.define('my-uploader', class extends HTMLElement { constructor() { const template = document.getElementById("TEMPLATE_UPLOADER"); const content = template.content; let superThis = super() // Create and binds the this keyword let shadowRoot = superThis.attachShadow({mode: "open"}); shadowRoot.appendChild(template.cloneNode(content, true)); } /** Custom Component Reactions **/ connectedCallback() { setTimeout(this.init.bind(this), 1000) } init() { const el = this.shadowRoot.querySelector('div'); console.log('I hope el is not null:', el) } }); </script> <my-uploader></my-uploader></code><p> </p> <div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div><pre> </pre>现在，我希望在模板中查询该组件的某些元素。但是</div><code>init()</code></div>总是返回<p><code>this.shadowRoot.querySelector</code></p>。我认为这些元素尚未在<p><code>null</code><pre>时间尚未创建，因此我设置了一个超时，以确保创建其完成，但得到相同的结果。这就是Chrome中的the（旁注</pre><code>connectedCallback</code><pre>是</pre><code>init()</code><pre>）：</pre> <pre></pre><pre></pre><pre> </pre>您可以看到内部有<pre><code>this.shadowRoot</code></pre>，但是<pre><code>this</code></pre>返回null。如何查询Web组件中的项目？</p> <p> <a href="https://i.sstatic.net/SKFyB.png" rel="nofollow noreferrer"> <img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvU0tGeUIucG5n" alt="enter image description here"/></a><code><my-uploader></my-uploader></code></p><p> <pre>应该是：</pre><code>divs</code><pre></pre> </p>您是一个解释错误的dom参考，因此您创建了一个浅副本，没有</question><code>this.shadowRoot.querySelector('div')</code><answer tick="true" vote="2"><p> <pre>我一点凝结了您的代码</pre> </p><p><pre> </pre> </p><code>template.cloneNode(content, true)</code><p> <pre> </pre> <pre></pre> </p> <p> </p><code>template.cloneNode(true)</code><p> </p> <div data-babel="false" data-lang="js" data-hide="false" data-console="true"><div>

javascript web-component

回答 0 投票 0

如何正确处理带有子元素的Javascript自定义元素（Web组件）？

我有一个自定义元素，它应该有许多 HTML 子元素。我在类的构造函数中初始化它时遇到了这个问题（结果不能有子级）。我明白原因并知道如何解决...

javascript html web-component custom-element

回答 5 投票 0

检测当前 Web 组件外部的点击

我有一个嵌入其他组件中的 Web 组件（Polymer 3），并且想要“感知”其外部的点击。例如，在 React 中，我会在组件内部执行类似的操作...

javascript typescript polymer web-component

回答 2 投票 0

以编程方式设置属性时是否会触发 attributeChangedCallback？

如果我们在颜色跨度自定义元素上定义这样的属性：静态获取观察属性（）{ 返回['bgc']; } 并获取对这样的实例的引用，同时还更改 bgc

javascript web-component custom-element

回答 1 投票 0

如何在ReactJS中从另一个组件接收表单数据

我正在构建一个反应天气应用程序，允许用户输入他们的城市名称，并将天气信息显示给用户。问题是，我已经在表单中输入了输入和按钮，并且我...

javascript reactjs components web-component

回答 1 投票 0

“addEventListener”不适用于 HTML Web 组件

我制作了如下所示的网络组件。 Webtest.js 类 Webtest 扩展 HTMLElement { 构造函数（）{ 极好的（）; } 连接回调() { this.attachShadow({mode: '打开'}); ...

javascript html addeventlistener web-component shadow-dom

回答 1 投票 0

React 19 typescript 添加 typeof Web 组件

React 18 中 JSX 上的类型定义。IntrinsicElements 适用于 Web 组件。但升级到19后，即使我可以访问全局类型，下面的类型也不起作用。我该如何修复类型定义...

reactjs typescript web-component react-19

回答 1 投票 0

如何对工具面板中的列进行排序。银网格

编辑：发现移动列在 v6.4.0 中不起作用示例链接： https://www.ag-grid.com/javascript-grid-tool-panel/toolPanelExample.html 工具面板中可见的列的顺序始终...

web-component ag-grid

回答 2 投票 0

如何使用阴影部分设置 Ionic 组件的样式

我创建了一个带有弹出窗口的按钮，如下所示：这是Vue模板代码：我创建了一个带有弹出窗口的按钮，如下所示：这是Vue模板代码： <template> <div :class="['lang-button', { 'in-list': listItem } ]"> <k-button id="lang-button" :raised="!listItem" clear class="py-3 px-3"> <font-awesome-icon icon="earth-americas" class="mr-2" /> {{ $t('common.language') }} </k-button> <ion-popover trigger="lang-button" :dismiss-on-select="true"> <ion-content class="lang-button-popover-content"> <ion-list> <ion-item :button="true" :detail="false" @click="setLanguage('en')">English</ion-item> <ion-item :button="true" :detail="false" @click="setLanguage('es')">Español</ion-item> </ion-list> </ion-content> </ion-popover> </div> </template> 不幸的是，最后一项（西班牙语）有一个我想删除的底部边框。在 Chrome Inspector 中，我可以这样做：之后看起来更好了：但我无法弄清楚如何在代码中设置它的样式来做到这一点。我试过： ion-item::part(native) { .item-inner { border-bottom-width: 0; } } 还有一堆其他变体，但没有任何效果。如何删除 div.item-inner 的样式以删除下边距？谢谢。要解决这个问题就像查看 docs 一样简单，它向您展示了如何在没有额外 CSS 的情况下执行此操作。 <ion-item lines="none"> <ion-label>Item Lines None</ion-label> </ion-item>

css ionic-framework web-component shadow-dom ionic-vue

回答 1 投票 0

react-cosmos vs atellier vs React Storybook 用于构建 UI 组件

我和我的团队在我们的项目中使用 React，我们正在考虑使用这些工具中的一种：react-cosmos、Atellier 或 React Storybook 来构建 UI 组件。我的问题主要有哪些

reactjs web-component

回答 1 投票 0

如何访问 Web 组件中的（未命名的）插槽内容

如何使用javascript访问Web组件的connectedCallback内未命名槽的内容（=“我需要访问此文本节点”）？使用 javascript ShadowRoot 仅 sh...

javascript components web-component

回答 2 投票 0

配置外部样式表与lit元素一起使用？

我想为语法突出显示 Web 组件的客户端提供一种方法来指定外部语法突出显示样式表的使用。例如，这个演示使用渲染函数来内联...