web-component 相关问题

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

我的组件必须渲染一个对象来填充内容。当我在 Vue 项目中工作时，我可以毫无问题地传递这个对象我的组件必须渲染一个对象来填充内容。当我在 Vue 项目中工作时，我可以毫无问题地传递这个对象 <my-compnent :card="card"></my-component> 但是当我尝试使用构建的组件时，它不会将“MyCard”读取为对象，而是读取为字符串......请提供一些帮助我以与vue相同的方式尝试过，使用：card，但它不起作用，如果我只使用card =“card”，它可以访问组件但没有对象我的代码： <script> card = { name: 'card', graphic: 'https://static.anychart.com/images/gallery/v8/line-charts-line-chart.png', subtitle: 'about this card', info: 'this is a test content card', selector1: [ { name: 'opt 1' }, { name: 'opt 2' }, { name: 'opt 3' } ], selector2: [ { name: 'opt A' }, { name: 'opt B' }, { name: 'opt C' } ] } </script> <script src="https://unpkg.com/vue"></script> <body> <my-component card="card"></card> </body> 错误： [Vue warn]：无效的道具：道具“card”的类型检查失败。期望的对象，得到值为“card”的字符串。我也尝试过 <my-component :card="card"></card> 但这仅适用于 vue 项目，不适用于导出的 Web 组件。它给出了这个错误： [Vue warn]：渲染错误：“TypeError：无法访问属性“名称”，_vm.card 未定义” card="card" 会将字符串“card”作为值传递给 card 属性。如果你想将 JS 对象传递给 Vue 外部导出的 Web 组件，那么你必须在 JS 本身中完成。 <script> const card = { name: 'card', graphic: 'https://static.anychart.com/images/gallery/v8/line-charts-line-chart.png', subtitle: 'about this card', info: 'this is a test content card', selector1: [ { name: 'opt 1' }, { name: 'opt 2' }, { name: 'opt 3' } ], selector2: [ { name: 'opt A' }, { name: 'opt B' }, { name: 'opt C' } ] } let comp = document.querySelector('my-component') comp.card = card </script> <body> <my-component card="card"></card> </body> 仅当您在 vue 项目中工作时，才可以使用 v-bind:card 或简单地使用 ':card'，在这种情况下，您不需要使用导出的组件。但在这种情况下，对象 card 需要传递给 Vue 实例的 data 属性，否则 Vue 找不到它。这就是您收到错误的原因。 <script> const app = new Vue({ el: '#app', data: { card, }, } </script> <my-element :user.prop="{ name: 'jack' }"></my-element>  <my-element .user="{ name: 'jack' }"></my-element>

javascript vue.js vue-component web-component vue-directives

回答 2 投票 0

有什么方法可以通过字符串初始化 astro 组件吗？

我正在从 CMS 获取一些数据，但在尝试初始化我以字符串形式获取的组件时遇到了困难。这些是我的字符串数组组件： [ ' 我正在从 CMS 中获取一些数据，但在尝试初始化我以字符串形式获取的组件时遇到了困难。这些是我的字符串数组组件： [ '<Header text="title1" img="link/to/image1" />', '<Header text="title2" img="link/to/image2" />' ] 我找不到任何方法将这些字符串初始化为 astro 中的组件。这可能吗？另外，我没有使用任何前端框架集成 atm 提前致谢！作为后续：由于在 vanilla astro 中找不到任何方法来做到这一点，我现在使用 svelte 集成来动态创建组件。在 svelte 中，我可以做这样的事情： {#each pageData as element} {#if element["element-type"] === "header"} <Header content={element["content"]} /> {/if} {/each}

javascript node.js frontend web-component astro

回答 1 投票 0

检索 <custom-web-component /> 中的反应上下文？

我有一个定义的，它可能会在基于 React 的应用程序运行时出现在 DOM 中的任何位置。的connectedCallback() 告诉我有一个定义的 <custom-web-component />，它可能会在基于 React 的应用程序运行时出现在 DOM 中的任何位置。 <custom-web-component /> 的 connectedCallback() 告诉其他地方的 <Manager /> 反应组件到 createPortal(<Foo />, this)，在 <custom-web-component /> 的位置注入更多反应内容。注入的内容似乎可以访问 React Context，无论它安装在 React 树中的什么位置，<Manager />都可以使用该上下文。这对我来说对于大多数 React 上下文都很好，因为我可以确保 <Manager /> 也位于必要的上下文提供程序中。我的麻烦是react-router-dom的目的对react树中的放置更加敏感。由于 <Manager /> 靠近反应树的根部，与 <Foo /> 只是作为典型子元素安装在那里相比， "/route/segments/*" 不知道嵌套路由已经匹配了哪些 <Foo />。 <Foo />的路由路径基本上需要是相对于根的，这是不可取的。我想通过以某种方式从 <custom-web-component /> 的父级窃取上下文并使用 <UNSAFE_RouteContext.Provider value={parentContext } /> 将 <Foo /> 包裹在门户内恢复路由器上下文来恢复更直观的路由支持。但是如何获得parentContext呢？同样，<custom-web-component /> 可能会放置在任何地方（通过非反应代码），甚至放置在其他此类门户内。我无法在 Web 组件内执行 parentContext = React.useContext(UNSAFE_RouteContext)，因为它不是反应功能组件。我最好的想法是1）以某种方式在反应树中找到<custom-web-component />的实例，然后2）以某种方式从中提取路由器上下文（或其父级？）。有没有办法完成这两个步骤？你的问题很复杂，特别是关于react-router-dom的上下文敏感性。由于 <custom-web-component /> 不是 React 功能组件，因此像 useContext 这样的典型 React 方法将不起作用。解决此问题的一种方法可能是将路由器上下文作为 props 传递给 <Manager />，然后在创建门户时将其传递给 <Foo />。您可以在 <custom-web-component /> 实例化点捕获路由器上下文（假设此时它位于 React 功能组件内），然后将其转发到 <Manager />。另一种不太传统的方法是从 <custom-web-component /> 向上遍历 DOM，找到具有路由器上下文的最近父级，然后将其传回 <Manager />。这更加hacky并且可能不太可靠。考虑到限制，我认为没有完美的解决方案，但这些方法可能为您提供一种手动传递所需上下文的方法。

reactjs web-component react-context

回答 1 投票 0

来自槽的数据绑定？

我一直在使用 Lit，最近我遇到了一个奇怪的问题，当属性值（在本例中：hasUpdated）为

javascript web-component lit-element lit lit-html

回答 1 投票 0

Web 组件 #shadow-root css 泄漏到文档

我对Web组件的理解是，你可以用它来防止CSS从Web组件泄漏到父组件。我正是需要这个，但由于某种原因，Web 组件内部的样式会影响......

html css web-component shadow-dom

回答 2 投票 0

有没有一种方法可以在不使用 Shadow DOM 的情况下向 <slot> 添加类似 <template> 的元素？

为了遵守 DRY 原则，我想创建一个基于的自定义组件。代码看起来像这样（请原谅我在输入此内容时的偷工减料... 为了遵守 DRY 原则，我想创建一个基于 <template> 的自定义组件。代码看起来像这样（请原谅我在通宵达旦后在手机上打字时的偷工减料）： // base.html <template id="player"> <div class="card"> <div class="card-body"> <slot name="user-username"></slot> </div> </div> </template> // app.js class PlayerCard extends HTMLElement { constructor(){ super(); let tmpl = querySelector...; this.appendChild(tmpl.content.cloneNode(); } } define('player-card', PlayerCard); // index.html {% for user in users %} <player-card> <div slot="user-username">{{ user }}</div> </player-card> {% end for %} 但是在梦想破灭和长时间的研究之后，我了解到插槽只能在 Shadow DOM 中使用。使用 SDOM 的问题是内部样式受到保护，不能直接受外部 CSS 影响。这意味着，一方面，我无法将数据注入到模板实例中，也无法在不重新实现 Bootstrap 的情况下使用 Shadow DOM。我被困住了。对我的大脑来说，一定有一种方法可以实现这一点，但我的大脑无法找到它 - 要么因为它太复杂，要么因为它太琐碎和容易。请问有什么建议吗？是的，<SLOT>s只能在shadowDOM内部使用但是您可以使用样式槽做更多事情。有关详细答案，请参阅：::用于shadowDOM插槽中嵌套子项的开槽CSS选择器 customElements.define('player-card', class extends HTMLElement { constructor() { let template = (id) => document.getElementById(id).content.cloneNode(true); super() .attachShadow({mode: 'open'}) .append(template(this.nodeName)); this.onclick = (evt) => this.style.color='blue'; } }); /* GLOBAL CSS */ player-card { /* inheritable styles trickle down into shadowDOM */ font: 20px Arial; color: green; } [slot="username"] { /* lightDOM styles are REFLECTED to SLOTs */ width: 200px; border: 2px solid green; } <template id="PLAYER-CARD"> <style shadowDOM-CSS > div { /* styles do not style content in SLOTs */ padding: 1em; background:gold; } ::slotted(*) { /* slotted can only style the lightDOM 'skin' */ background: lightgreen; } </style> <div> <slot name="username"></slot> </div> </template> <player-card>  <div slot="username">Ahmed</div> </player-card> <player-card>  <div slot="username">Danny</div> </player-card> Danny 是对的，但还值得一提的是外部样式表可以通过 Web 组件使用 100% 原始代码导入。您的组件可以访问该样式表的规则，对于敏锐的开发人员来说，您会很高兴知道浏览器将从其缓存中获取它，而不是发出另一个请求（假设之前已下载）。像这样：  <template> <p>I'm salmon colored!</p> <button ord="primary">Primary button styles come from the imported stylesheet</button> <div class="fnt-bold">Bold class also comes from the imported stylesheet</div>  <style> /* Importing global stylesheets will penetrate shadow DOM. Browsers use cached file if already downloaded. */ @import "https://unpkg.com/[email protected]/dist/m-min.css"; /* :host selects the custom element, i.e. <x-counter>, not the template. */ :host { display: block } /* Anything else is scoped to this template. */ p { color: lightsalmon } </style> </template> 完整示例：https://github.com/jfbrennan/single-file-web-component/blob/master/x-counter.html#L15 我不记得在哪里学到了有关导入的知识，但如果我能找到资源，我会更新我的答案。

javascript html web-component shadow-dom

回答 2 投票 0

Angular - 与清单中的 Web 组件和 url 进行模块联合

我正在尝试按照 Angulararchitects 的本教程加载微前端作为 Web 组件。我的 Shell 应用程序中的配置：主要.ts initFederation('/appconf/mf.manifest.json') .catch（错误...

angular web-component angular-module-federation

回答 1 投票 0

如何在 Vue 3 创建的 Web 组件中添加像 Vuetify 这样的库？

我正在寻找添加一些库，如 Vuetify 或在 Vue3 创建的 Web 组件中使用其他 Javascript 库。我也检查了有关此问题的所有答案，但没有找到任何

vuejs3 vuetify.js web-component

回答 1 投票 0

无法将对象属性传递给 vue 3 Web 组件

我正在尝试将对象 prop 传递给 vue3 Web 组件。我的网络组件：从“vue”导入{类型Ref，ref，类型PropType}；导出默认值{ 公关...</desc> <question vote="0"> <p>我正在尝试将对象 prop 传递给 vue3 Web 组件。</p> <p>我的网络组件：</p> <pre><code><script lang="ts"> import { type Ref, ref, type PropType } from "vue"; export default { props: { text: String, count: { default: 0, type: Number }, extraSettings: Object as PropType<{ name: String }> }, setup(props, context) { let count: Ref<number> = ref(props.count); const increaseCount = () => { count.value++; }; // expose to template and other options API hooks return { count, text: props.text, increaseCount }; }, mounted() { console.log(this.count); console.log(this.extraSettings); } }; </script> <template> <button @click="increaseCount()">{{ text }} num: {{ count }}</button> </template> <style scoped lang="scss"> </style> </code></pre> <p><pre><code><my-label text="test" count="5" .extra-settings="{ name: 'john' }"></my-label></code></pre></p> <p>主要.ts</p> <pre><code>import { defineCustomElement } from "vue"; import MyLabel from "./components/MyLabel.ce.vue"; customElements.define("my-label", defineCustomElement(MyLabel)); </code></pre> <p>text参数正确传递，number参数也正确解析。</p> <p>但是对象参数未定义</p> <p>我按照<a href="https://vuejs.org/guide/extras/web-components.html#using-custom-elements-in-vue" rel="nofollow noreferrer">官方文档</a>并尝试过：</p> <ul> <li>添加“.”道具名称之前：extraSettings 未定义</li> <li>在 prop 名称之前添加“:”和之后添加“.prop”：extraSettings 未定义</li> <li>仅写入额外设置：Prop 是一个字符串</li> </ul> </question> <answer tick="false" vote="0"> <p>尝试改变</p> <pre><code><my-label text="test" count="5" .extra-settings="{ name: 'john' }"></my-label> </code></pre> <p>到</p> <pre><code><my-label text="test" count="5" :extra-settings="{ name: 'john' }"></my-label> </code></pre> </answer> </body></html>

json vuejs3 web-component vue-props

回答 0 投票 0

可以将ag-grid-community与LitElements一起使用吗？

我在使用点亮元素初始化网格实例时遇到困难，这是我尝试过的示例，从“ag-grid-community”导入{Grid}；导出类 myComponent 扩展 LitElement {

javascript ag-grid web-component lit-element

回答 1 投票 0

如何访问Web组件中的全局CSS变量

我正在使用 vanilla webcomponents 并与 webpack 捆绑在一起。在我的组件 css 中，我使用 @import 声明导入全局 css 表，例如 @导入“../../style.css”；在 style.css 中我...

javascript css webpack web-component

回答 2 投票 0

如何将样式表添加到shadow dom？

我正在使用网络组件。我有以下 html 结构 #shadow-root（打开）我正在使用网络组件。我有以下 html 结构 <div class="test"> #shadow-root (open) <overlay-trigger type="modal"> <div id = "login-dialog"> #shadow-root (open) <div id = "modal"> 我有以下代码 const styleString = String(styles); const style = document.createElement("style"); style.type = "text/css"; style.innerHTML = styleString; const styleString2 = String(guestModalStyles); const style2 = document.createElement("style"); style2.type = "text/css"; style2.innerHTML = styleString2; let host = this.renderRoot?.querySelector('overlay-trigger[type="modal"]')?.querySelector("#login-dialog")?.shadowRoot?.querySelector(".modal"); if (host) { host?.appendChild(style); host?.appendChild(style2); } 如何为模态元素添加样式？那个 class = "modal" 的？我是在上面做的吗？您的代码看起来大部分都是正确的，但是需要进行一些更改来保证样式应用于 Shadow DOM 内的正确组件。不要使用 this.renderRoot，而是直接使用 ShadowRoot 属性。如果您使用 this.attachShadow() 方法来创建 Shadow DOM，this.shadowRoot 将为您提供 Shadow DOM 的基础。在 Shadow DOM 中使用 querySelector 时，您希望使用 ::shadow 或 ::opened 伪组件来选择 Shadow DOM 中的组件。这是更改后的代码： const styleString = String(styles); const style = document.createElement("style"); style.type = "text/css"; style.innerHTML = styleString; const styleString2 = String(guestModalStyles); const style2 = document.createElement("style"); style2.type = "text/css"; style2.innerHTML = styleString2; const overlayTrigger = this.shadowRoot.querySelector('overlay-trigger[type="modal"]'); if (overlayTrigger) { const loginDialog = overlayTrigger.shadowRoot.querySelector("#login-dialog"); if (loginDialog) { const modal = loginDialog.shadowRoot.querySelector(".modal"); if (modal) { modal.appendChild(style); modal.appendChild(style2); } } } 要知道自己是否正确执行此操作，一种更简单的方法是临时将 css 路径 getter 函数（如下所示：从 Dom 元素获取 CSS 路径）添加到代码中（使用 console.log 或alert），然后删除代码但保存选择器。一旦你有了一个 Element 对象，对其进行样式设置就像一样简单 var elem = ...; elem.style.color = "red"; 您可以使用 document.styleSheets 属性来访问您的 CSS 页面（它返回一个数组，迭代数组以访问特定的 CSS 样式表），这些页面链接到您的 html 页面并使用 csspagefromstyleSheet。insertRule() 方法将样式添加到您的 CSS。

javascript html css web-component lit

回答 3 投票 0

是否可以将整个 Angular 应用程序导出为 Web 组件？

这是一个理论问题。我知道我可以使用 Angular Element 将 Angular 组件导出为 Web 组件。我的问题是：我可以将整个 Angular 应用程序导出并作为 Web 组件...

angular web-component angular-elements

回答 0 投票 0

自定义 Web 组件中不会调用 setter 和 getter

我有以下网络组件：我最初在本地测试了这个（在 create-react-app 中）不起作用。然后我将它放入codesandbox（反应模板）中，它也不起作用。班级

javascript typescript create-react-app web-component

回答 2 投票 0

Vue3 Web 组件 V 模型

我会使用 vue3 创建一个 Web 组件来管理输入和表单。但我对两个数据绑定有问题。我在 html 页面中定义了 Web 组件。我会使用 vue3 创建一个 web 组件来管理输入和表单。但是我对两个数据绑定有问题。我在 html 页面中定义了 Web 组件。 <vue-input-text id="prova_di_un_input_text" name="prova_di_un_input_text" value=''></vue-input-text> 我在写作时钩住发射 document.querySelector('#prova_di_un_input_text').addEventListener('update:value', function (e) { console.log("input cambiato", e, e.detail) let valore_da_aggiornare = e.detail[0].value }); 但我不明白如何在获取新值后更新 Web 组件值。感谢每一位支持除非您需要特定的东西，否则您不需要自己在 Vue 中实现双向数据绑定（太棒了，对吧？）。只需使用 v-model 指令，这是 doc 代码示例： <vue-input-text v-model="myValue" id="prova_di_un_input_text" name="prova_di_un_input_text" /> const myValue = ref('') 你应该听update:modelValue事件而不是update:value。 vue 组件 MyInput.ce.vue <script setup> defineProps({ modelValue: String, }) const emit = defineEmits(['update:modelValue']) function onInput(event) { console.log(event.target.value) emit('update:modelValue', event.target.value) } </script> <template> <input :value="modelValue" @input="onInput" /> </template> 在main.js中注册Web组件 import { defineCustomElement } from 'vue' import MyInput from './components/MyInput.ce.vue' const MyInputEle = defineCustomElement(MyInput) customElements.define('my-input', MyInputEle) 在 html 中使用 my-input 标签 <my-input value="hello"></my-input> <br /> <p class="my-p"></p> <script type="module" src="/src/main.js"></script> <script> const myInput = document.querySelector('my-input') // listen update:modelValue myInput.addEventListener('update:modelValue', (event) => { const inputText = event.detail[0] document.querySelector('.my-p').innerText = inputText }) </script>

vue.js web-component

回答 2 投票 0

如何在 cypress 测试中获取 Web 组件插槽的内容？

使用简单的模板和一个测试安装（一些文字）； cy.get('span').contains('一些文本'); 这不是...

cypress web-component

回答 3 投票 0

DOMContentLoaded 与 Web 组件有什么关系？

只有在 DOM 准备就绪后才开始操作它是古老的常识，我们可以确定所有元素都可用，而在后 jQuery 时代，我们都在使用 DOMContentLoaded e...

javascript web-component deferred-loading domcontentloaded

回答 3 投票 0

在 ts 中导入 Design Token 库时出错

嘿，所以我正在尝试实现一个功能，您可以在其中传递包含样式的字符串（JSON 字符串），然后我将在该 Web 组件的 CSS 中使用它作为样式。