custom-element 相关问题

自定义元素是HTML的一项功能,它为您提供了一种构建自己的全功能DOM元素并在HTML标记,CSS样式表和JavaScript代码中使用它们的方法。

我应该如何引用角度自定义元素(Web 组件)中的资源

我创建了一个 Web 组件,并从其中引用了我的资产文件夹中的图像 如下 在本地一切都很好,我发布了我的

回答 5 投票 0

如何使用影子 DOM 附加样式表根据子节点选择器设置自定义 HTML 元素的样式?

我有一个自定义 HTML 元素,可以对按钮元素进行分组: 福 酒吧 巴兹 &...

回答 1 投票 0

FireFox/Safari 事件目标与影子 DOM 中的当前目标

我见过许多看似相似的(Firefox + Event Target)问题,但没有处理我的特定问题。 基本上,我在这里和参考文档中读到的所有内容都表明目标是......

回答 1 投票 0

FireFox 事件不会冒泡或从阴影 DOM 传播到光 DOM

编辑1 Firefox 实际上确实将一个事件冒泡到 light DOM,但它是一个 INPUT 事件;不是 CLICK 事件。为什么? 结束编辑1 文档说事件在阴影中的元素上触发......

回答 1 投票 0

自定义元素设置:构造函数与connectedCallback

我是 Web 组件的新手,我注意到一些示例在自定义元素的构造函数中设置 dom,而其他示例则在connectedCallback 中设置 dom。 因为两者似乎都工作正常(虽然我只尝试过

回答 1 投票 0

如何使字体 CSS 在自定义元素中工作

我们正在尝试使用自定义字体制作自定义元素应用程序。我们正在使用 @font-face 属性,但当我们检查时,会显示默认字体 Times New Roman。 这是代码的一部分...

回答 1 投票 0

使用 Bootstrap 设置自定义元素 ShadowDOM 样式不起作用

我尝试使用shadowDom及其样式(即bootsrap)创建自定义元素导航栏。我使用 NPM 安装了引导程序。然后我在 style.scss 中导入了 bootstrap 并获取了导航栏

回答 1 投票 0

找不到 CSS 选择器来设置 Shadow DOM 委托焦点的样式

编辑1+ 好吧,抱歉,徒劳无功。这似乎是一个直接的 CSS 问题。在光 DOM 中:- #disTick::部分(内藤){ 盒子阴影:插入 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0p...

回答 1 投票 0

自定义元素:无法从按钮扩展非法构造函数

问题 作品 MyButton 类扩展了 HTMLButtonElem...

回答 1 投票 0

如何为自定义元素提供回调

我决定尝试通过编写自定义元素来创建本机 Web 组件。 导出默认类 DropDown 扩展 HTMLElement { ... 当我把所有东西都准备好后,似乎很糟糕......

回答 1 投票 0

配置 HTML 元素使其行为类似于文本字符

是否可以将 HTML 元素(自定义元素或内置元素)配置为将其视为单个文本(非空白)字符 - 也就是说,它有一个隐含的 包裹在自身周围...

回答 1 投票 0

使用自定义元素和模板访问实际/可视 DOM

假设我有一个叫做“面板”的东西。它包含一个隐藏部分和一个显示它的按钮。很容易。 然而我有点喜欢并决定使用自定义元素 假设我有一个叫做“面板”的东西。它包含一个隐藏部分和一个显示它的按钮。够简单的。 但是我有点喜欢,决定使用自定义元素 <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 = ""; }); } } );

回答 1 投票 0

如何在Angular v17中使用shoelace.style组件?

我是 Angular 的新手,这是我的第一个项目,所以也许这个过程是显而易见的。我按照 Shoelace Angular Integration 中概述的步骤进行操作,但无法运行它。我注意到还有...

回答 1 投票 0

[已解决]如何测试 Angular 自定义元素并在模块 ngDoBootstrap 中进行覆盖

我想在我的模块中完成覆盖,但似乎可以找到一种在引导程序内引用/监视 customElements.define 的方法。 奖金: 对 useFactory 覆盖率的帮助会很大

回答 1 投票 0

在自定义元素中设置属性的正确位置

最小重现 - js 代码部分,第 5 行。 类 Bazooka 扩展 HTMLElement { 主持人; 构造函数(){ 极好的(); this.className = "嗨"; // 为什么 ??请参阅项目符号编号 - 5 --> htt...

回答 1 投票 0

验证表单关联的自定义元素

我已经构建了一个简单的 2 个文本字段自定义元素,但我无法让验证正常工作。没有涵盖这方面的教程。 这是我的自定义元素: /* 名称.js */ 类我的名字

回答 1 投票 0

普通 JavaScript 中的 Web 组件

我创建了一个没有任何框架的小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(); });

回答 3 投票 0

在 Web 组件中重写 setAttribute

我正在构建一个 Web 组件包装器。在此包装器中,我想在构建组件后动态定义观察到的属性。 据我了解,没有简单的方法可以做到这一点...

回答 1 投票 0

如何在 Web 组件中创建 Accordion 自定义元素

我正在尝试使用 javascript 中的自定义元素创建一个手风琴。 下面提到的 HTML 正如我在 HTML 中所写的 var Accordions = document.querySelectorAll(".accordion"); 为了...

回答 1 投票 0

如何获取派生类方法参数的类型?

我想创建一个将自定义 HTML 元素与一些附加属性和方法混合在一起的类:如果我扩展该类以创建新组件,则新组件将是自定义 HTML 元素...

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.