自定义元素是HTML的一项功能，它为您提供了一种构建自己的全功能DOM元素并在HTML标记，CSS样式表和JavaScript代码中使用它们的方法。
假设我有一个叫做“面板”的东西。它包含一个隐藏部分和一个显示它的按钮。很容易。 然而我有点喜欢并决定使用自定义元素 假设我有一个叫做“面板”的东西。它包含一个隐藏部分和一个显示它的按钮。够简单的。 但是我有点喜欢，决定使用自定义元素 <custom-panel> 来标记每个面板的边界，<template> 表示内容，<slots> 表示配置（标题、详细信息等）。 现在我对如何连接按钮有点困惑。该模板具有 CSS，如果设置了正确的类，它将显示/隐藏面板的详细信息。但我该如何设置呢？我只知道如何获取模板的内容（没有已解析的插槽）或自定义面板的内容（没有模板信息）。 完整示例： customElements.define( 'custom-panel', class extends HTMLElement { constructor() { super(); const template = document.getElementById('custom-panel-template'); const templateContent = template.content; this.attachShadow({ mode: 'open' }).appendChild( templateContent.cloneNode(true) ); } } ); <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Custom Panels</title> </head> <body> <custom-panel> <span slot="openButtonText">Open Panel 1</span> <span slot="closeButtonText">Close Panel 1</span> <span slot="panelName">Panel 1</span> <div slot="">Panel 1 Details</div> </custom-panel> <custom-panel> <span slot="openButtonText">Open Panel 2</span> <span slot="closeButtonText">Close Panel 2</span> <span slot="panelName">Panel 2</span> <div slot="panelContent">Panel 2 Details</div> </custom-panel> <template id="custom-panel-template"> <style type="text/css"> #panel { display: none; } #panel.open { display: revert; } </style> <!-- how do these get hooked in? --> <button type="button"><slot name="openButtonText">Default Open Button Text</slot></button> <button type="button"><slot name="closeButtonText">Default Close Button Text</slot></button> <fieldset id="panel"> <legend><slot name="panelName">Default Panel Name</slot></legend> <slot name="panelContent">Default Panel Content</slot> </fieldset> </template> </body> </html> customElements.define( 'custom-panel', class extends HTMLElement { constructor() { super(); const template = document.getElementById('custom-panel-template'); const templateContent = template.content; this.attachShadow({ mode: 'open' }).appendChild( templateContent.cloneNode(true) ); // get a reference to the panel const panel = this.shadowRoot.querySelector("#panel"); // hookup the open this.shadowRoot.querySelector("button#open").addEventListener("click", () => { panel.className = "open"; }); // hookup the close this.shadowRoot.querySelector("button#close").addEventListener("click", () => { panel.className = ""; }); } } );
如何在Angular v17中使用shoelace.style组件？
我是 Angular 的新手，这是我的第一个项目，所以也许这个过程是显而易见的。我按照 Shoelace Angular Integration 中概述的步骤进行操作，但无法运行它。我注意到还有...
[已解决]如何测试 Angular 自定义元素并在模块 ngDoBootstrap 中进行覆盖
我想在我的模块中完成覆盖，但似乎可以找到一种在引导程序内引用/监视 customElements.define 的方法。 奖金： 对 useFactory 覆盖率的帮助会很大
最小重现 - js 代码部分，第 5 行。 类 Bazooka 扩展 HTMLElement { 主持人; 构造函数（）{ 极好的（）; this.className = "嗨"; // 为什么 ？？请参阅项目符号编号 - 5 --> htt...
我已经构建了一个简单的 2 个文本字段自定义元素，但我无法让验证正常工作。没有涵盖这方面的教程。 这是我的自定义元素： /* 名称.js */ 类我的名字
我创建了一个没有任何框架的小Web组件。这是我的index.html： 我创建了一个没有任何框架的小型 Web 组件。这是我的index.html: <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <script src="clock.js" async></script> </head> <body> <clock-digital></clock-digital> <script> console.log(document.querySelector('clock-digital').cID); document.querySelector('clock-digital').method(); </script> </body> </html> 这是我的clock.js： customElements.define('clock-digital', class extends HTMLElement { get cID() {} set cID(value) {} constructor() { super(); var shadowRoot = this.attachShadow({ mode: 'open' }); var that = shadowRoot; this.cID = setInterval(function () { var currentdate = new Date(); that.innerHTML = `<div style="display: inline; background-color: whitesmoke; font-style: italic;">${currentdate.getHours()}:${currentdate.getMinutes()}:${currentdate.getSeconds()}</div>`; }, 500); } method() { console.log('method'); } }); 浏览器控制台显示此错误： undefined (index):14 Uncaught TypeError: document.querySelector(...).method is not a function at (index):14 为什么我的内联脚本无法访问 cID 和 method()？ 您的内联脚本在导入clock.js之前运行（这是异步的，因为您已将 async 属性添加到 <script> 标记）。由于该元素是在 clock.js 中定义的，因此当您的内联脚本尝试访问它们时，<clock-digital>.method 和 <clock-digital>.cID 还不存在。 几个选项： 删除 async 标签，以便导入在内联脚本运行之前同步发生（demo）。您将失去异步加载的优势，但这对您来说可能不是问题。 超时后运行内联脚本（允许 clock.js 完成导入） 为了保持脚本异步 (async)（有时效果更好），您可以向 onload 元素添加一个 <script> 事件处理程序，该处理程序将调用您的内联脚本： <script> function init() { console.log(document.querySelector('clock-digital').cID); document.querySelector('clock-digital').method(); } </script> <script src="clock.js" async onload="init()"></script> WebComponents API 已经为您介绍过了。只需在此处使用 customElements.whenDefined(tagName) 承诺即可： customElements.whenDefined('clock-digital').then(() => { console.log(document.querySelector('clock-digital').cID); document.querySelector('clock-digital').method(); });
我正在构建一个 Web 组件包装器。在此包装器中，我想在构建组件后动态定义观察到的属性。 据我了解，没有简单的方法可以做到这一点...
我正在尝试使用 javascript 中的自定义元素创建一个手风琴。 下面提到的 HTML 正如我在 HTML 中所写的 var Accordions = document.querySelectorAll(".accordion"); 为了...
我想创建一个将自定义 HTML 元素与一些附加属性和方法混合在一起的类：如果我扩展该类以创建新组件，则新组件将是自定义 HTML 元素...
如何将 Nuxt 3 构建为 Web 组件以嵌入到另一个网站
我正在尝试将 Nuxt 3 项目作为 Web 组件（聊天机器人 SPA）嵌入到外部网站上。 我在一个使用 Vue 自定义元素的 Vue 3 项目中有一个有效的实现，例如 c...
自定义 DefineCustomElement 实现中缺少插槽
我们正在使用 Vue 3、TS 和 Tailwind 开发 Web 组件库。我们正在使用 DefineCustomElement 宏的自定义实现，其中 @tony19 能够提供像 vue-r 这样的插件支持...
如果您看我这里的简单示例，您会发现 test_button.html 有一些内联 CSS：- #myBtn[点击=“true”] { 不透明度：0.5； } 只要我经历过这似乎就有效
我正在创建一个与 Vite 捆绑在一起的简单网站，但没有像 React、Vue、Svelte 等外部框架。该网站具有使用不同数据的重复 HTML 元素。我想使用自定义
我在shadowDOM自定义元素模板内应用表格样式，在插槽内，它不接受表格th和td CSS。 类 Table 扩展 HTMLElement { 构造函数（）{ 苏...
如何调用 Angular Web 组件（自定义元素）上的方法
我创建了一个如下所示的 Angular Web 组件 @成分（{ 选择器：'dlx-slider'， templateUrl: './slider.component.html', styleUrls: ['./slider.component.scss'], 封装：
我试图在我的所有网页上显示相同的标题（菜单）。 youtube 有一个关于此的视频。 （与上面的标题相同）。 但我似乎无法让它继续下去。 参考我的代码（mainmenu.j...
如何将“:host”（或“:host()”）与“:has()”一起使用
有人知道如何使用 :host （或 :host()） 和 :has() 吗？ 例如这样的事情： :主机:有([禁用]) { 不透明度：0.75； } 或者 :主机(:有([禁用])) { 不透明度：0.75； } 与...
使shadow dom中的元素具有最小高度和边框的自定义元素高度的100％，同时如果溢出也缩放父级
我正在制作一个自定义元素，它充当具有语法突出显示和其他一些功能的文本区域。我将其简化为一个自定义元素，其中有一个 div，单击时会获得高度...
在 Svelte 4 和 vite 项目中创建自定义元素的正确配置是什么？
完成以下步骤后 通过 npm create vite@latest 创建 Svelte 项目 ├── @sveltejs/[email protected] ├── [email protected] └── [email protected] 将 App.svelte 更改为 完成以下步骤后 通过 npm create vite@latest 创建 Svelte 项目 ├── @sveltejs/[email protected] ├── [email protected] └── [email protected] 将 App.svelte 更改为 <svelte:options customElement="my-element" /> <script> export let character = '!' </script> <h1>my-element{character}</h1> <style> h1 { color: teal; } </style> 将 main.js 更改为 import App from './App.svelte' export default App 添加编译器选项vite.config import {defineConfig} from 'vite' import {svelte} from '@sveltejs/vite-plugin-svelte' // https://vitejs.dev/config/ export default defineConfig({ plugins: [svelte({ compilerOptions: { customElement: true, } })], }) 跑步npm run build dist目录包含以下文件 dist │ index.html │ vite.svg └───assets │ index-22b2453f.js 虽然似乎可以从生成的 .js 文件中导入和使用自定义元素，但我想知道为什么它不仅仅是一个 bundle.js 文件，如这个答案中经常描述的那样 需要什么配置才能使用给定的“静态”名称生成一个 .js 文件，而不需要可以从中导入自定义元素的哈希值？ 我希望我正确理解你的问题，要生成单个“静态”包，请在 build.rollupOptions 中使用 vite.config.js。您可以在那里找到更多信息。 根据您的示例，在步骤 #4 中，vite 的配置将如下所示： import {defineConfig} from 'vite' import {svelte} from '@sveltejs/vite-plugin-svelte' // https://vitejs.dev/config/ export default defineConfig({ plugins: [ svelte({ compilerOptions: { customElement: true, }, }), ], build: { target: "esnext", rollupOptions: { input: { index: "./src/main.js", }, // single output: { format: "umd", chunkFileNames: `[name].[hash].js`, entryFileNames: "my-element.umd.js", // <-- dir: "dist", }, }, }, }); 然后您可以将文件添加到index.html中（文件位于public文件夹中）: <script type="module" src="my-element.umd.js" defer></script> 或者从 Svelte 组件导入它（文件位于 src 文件夹中）: import * as MyElement from './my-element.umd.js' 然后使用自定义元素： <my-element character="⚡" />
JS 可以像 SO 代码片段中的 iframe 一样隔离在影子 DOM 中吗？
SO 网站似乎使用 iframe 来运行代码片段。任何形式的 Web 组件都可以接受用户提供的 JavScript 并仅在影子 DOM 中独立运行吗？ 我尝试了一个简单的 sh...