custom-element相关内容

当一个属性在 svelte 中发生变化时如何做某事

使用 svelte 创建 web 组件，当组件的属性发生更改时，我需要运行一些代码. 我想出的是以下模式. export let test = "默认值";$:{testIsChanged(测试)；}函数 testIsChanged(newValue) {控制台日志(新值)；}test 的值为 {test} 这是这样做的方式吗?或者我错过了什么? 解决方案 这确实有效，正如你所看 ..

发布时间：2021-09-01 19:09:22 custom-element svelte 其他开发

如何在 shadow dom/web 组件中执行 javascript?

我正在尝试创建一个自定义元素，其中大部分 javascript 封装/引用在模板/html 本身中.如何从模板/元素制作要在 shadow dom 中执行的 javascript?下面是一个示例，可以更好地理解该问题.如何从 template.innerHTML (alert("hello"); console.log("hello from tpl");代码>) ..

发布时间：2021-07-23 20:08:09 javascript dom shadow-dom custom-element 前端开发

将 shadow DOM 附加到自定义元素会消除错误，但为什么呢?

根据自定义元素规范, 元素不得获得任何属性或子元素，因为这违反了使用 createElement 或 createElementNS 方法的消费者的期望. 在这种情况下，Firefox 和 Chrome 都正确地抛出了错误.但是，在附加 shadow DOM 时，不会出现错误(在任一浏览器中). 火狐: NotSupportedError:不支持操作 铬: 未捕 ..

发布时间：2021-07-23 20:07:50 html shadow-dom custom-element 前端开发

迭代自定义元素中的 HTMLCollection

如何在另一个自定义元素的 shadow dom 中迭代一个自定义元素的实例?HTMLCollections 似乎不像预期的那样表现.(我是一个 jQuerian 并且是一个新手，所以我确定我在某个地方犯了一个明显的错误. HTML 自定义元素定义 对于spk-inpu ..

发布时间：2021-07-23 20:07:14 javascript html shadow-dom custom-element 前端开发

尽管打开，ShadowRoot 属性为空

我正在尝试访问元素上的 ShadowRoot，并且属性 element.shadowRoot 正在返回 null. ShadowDOM 定义为 mode: 'open'，这是正确的，我什至可以 console.log(element) 看到所有properties 和 shadowRoot 是 ShadowRoot 类型的对象. 在我的应用程序中，我试图像这样访问该属性: let el ..

发布时间：2021-07-23 20:07:11 javascript shadow-dom custom-element 前端开发

在自定义元素 Shadow DOM 中选择插槽文本

我用普通的 html/css/js 制作了一个简单的复制粘贴组件.我试图把它变成一个 web 组件，但不能再让复制粘贴行为起作用. shadow DOM里面的标记基本上是 复制 Javascript: class CopyPaste extends HTMLElement {构造函数(){极好的();让 shadowRoot = thi ..

发布时间：2021-07-23 20:06:56 javascript shadow-dom custom-element 前端开发

我可以在 Shadow DOM 中获得一个按钮来提交不在 Shadow DOM 中的表单吗?

我刚刚遇到了一个有趣的情况，我在本地自定义元素的 Shadow DOM 中有一个提交 ，该元素放置在 中>. 选择#shadow-root...外面 我还有一个 作为 的直接子元素. 子 导致表单提交. 但是 shadow-root 中的 没有. 在某种程度上，我认 ..

发布时间：2021-07-23 20:06:50 shadow-dom custom-element native-web-component 其他开发

为什么我的 shadow dom 会破坏我的自定义元素?

这是自定义元素的 JSFiddle 演示:https://jsfiddle.net/c4bLo097/5/ 这是小提琴的代码: JavaScript: window.customElements.define('test-element', class TestElement extends HTMLElement {构造函数(){极好的()让内容 = `:主持人 {显示:块 ..

发布时间：2021-07-23 20:06:03 javascript css web-component shadow custom-element 前端开发

自定义元素 Web 组件 Shadow DOM 供应商脚本/元素

使用自定义元素时Shadow DOM，注入第3方脚本和元素的官方方法是什么，例如隐形 reCAPTCHA 需要以下脚本: ` 对于诸如 之类的 HTML 元素要引导并呈现 reCAPTCHA? shadowRoot 似乎没有像 head 这样的东西，脚本 ..

发布时间：2021-07-05 18:54:11 recaptcha web-component shadow-dom custom-element 其他开发

纸下拉菜单在发光元素中不起作用

编辑:事实证明，如果在将 paper-listbox 用于另一个元素之前导入它会有所帮助.出于某种原因，我认为它是作为对我正在导入的另一个元素的依赖项导入的，但没有.一旦我添加了显式导入，它就开始正常工作.原始问题如下. 首先，这个问题只会在 lit-element 中使用 paper-dropdown-menu(里面有 paper-listbox)时发生.我们在多个 PolymerElem ..

发布时间：2021-06-18 20:06:49 javascript html polymer custom-element lit-element 前端开发

如何对自定义元素进行单元测试

我有一个扩展 HTMLElement 的类.通过阅读该线程 https://github.com/Microsoft/TypeScript/issues/574#issuecomment-231683089 我看到我无法实例化自定义元素而没有得到非法构造函数.此外， registerElement 看起来很有希望，因为它返回了自定义元素的构造函数，但是现在不赞成使用窗口对象上存在的 C ..

发布时间：2021-05-20 18:56:32 javascript typescript web-component jestjs custom-element 前端开发

为什么自定义元素不支持将属性作为对象?

我正在尝试将自定义元素中的数据属性作为对象传递，但是在接收到AttachCallback方法内部时以字符串形式获取值"[object object]". 任何人都可以帮助我弄清楚如何在custom-element(网络组件)中将属性作为对象获得. 代码示例 myElements类扩展HTMLElement {createdCallback(){this.innerH ..

发布时间：2021-05-19 20:45:18 javascript web-component custom-element 前端开发

Shadow DOM中的React Component时未触发Click事件

我有一个特殊的情况，我需要用Web组件封装一个React组件.设置似乎非常简单.这是React代码: //React组件Box扩展了React.Component {handleClick(){alert("Click Works");}使成为() {返回 (÷ div样式= {{背景:'红色'，边距:10，宽度:200，光标:'指针'}}onClick = {e =>this.hand ..

发布时间：2021-05-19 19:01:41 javascript reactjs web-component shadow-dom custom-element 前端开发

IE11和Edge中实际上是否可以使用Web组件?

Web组件是一个炙手可热的新事物，它是一个真正的Web标准，每个人都在谈论它们并且大概在使用它们，它们似乎是解决我们遇到的问题的最佳解决方案(在非常不同的站点中共享组件). 因此，我们构建了两个Web组件.在Chrome中可以正常工作，但在IE11中不能正常工作.也许使用polyfills? https://www.webcomponents.org/polyfills 有大量的polyfill ..

发布时间：2021-05-16 19:42:00 internet-explorer-11 web-component polyfills custom-element 其他开发

有什么办法可以将自定义元素的模板标记和样式保留在javascript字符串之外?

这是使用来自 developers.google的自定义元素的示例.com : 让tmpl = document.createElement('template');tmpl.innerHTML =`:host {...}我处于影子状态！`;customElements.define('x-f ..

发布时间：2021-05-14 20:53:33 javascript html css templates custom-element 前端开发

在Custom Element构造函数中延迟setAttribute调用会导致DOM错误.是虫子吗?

这是一个小工具，显示了Chrome 72和Firefox 63中的控制台错误: https://jsfiddle.net/jr2z1ms3/1/ 代码是: customElements.define('test-element'，类扩展了HTMLElement {Constructor(){极好的()Promise.resolve().then(()=> {th ..

发布时间：2021-05-14 20:39:28 javascript html web-component custom-element 前端开发

可以在调用`disconnectedCallback`之前多次调用自定义元素的`connectedCallback`吗?

规范说: 但是，请注意，connectedCallback可以被调用多次，因此，任何真正一次的初始化工作都需要采取防护措施，以防止其两次运行. 这是什么意思?难道是说 connectedCallback 在调用 disconnectedCallback 之前可以被调用多次(通过浏览器引擎)? 如果每个 disconnectedCallback 总是有一个 connectedCal ..

发布时间：2021-05-14 20:37:08 javascript html web-component custom-element 前端开发

CustomElements在启用about:config属性的情况下在Firefox中不起作用

CanIuse 说，在Firefox中启用了 webcomponents v1v.61，将 dom.webcomponents.customelements.enabled 和 dom.webcomponents.shadowdom.enabled 属性设置为true.网络上的许多帖子和文章都同意这一点. 因此，我具有设置了上述属性的Firefox 61.0.2版，并且定义了一个自定义元素， ..

发布时间：2021-05-08 19:00:36 javascript firefox web-component shadow-dom custom-element 前端开发

使用来自Elm的引导选择

A正在尝试使用 bootstrap-select -扩展了具有良好功能和样式的html-select-tag.乍一看，从榆树中调用它似乎很简单.确实，被抢断的 view:模型->HTML消息查看模型=select [类"selectpicker"，属性"data-live-search""true"][选项[] [文字"foo"]，选项[] [文字“栏"]] 产生一个带有两个项目的漂亮(可 ..

发布时间：2021-05-04 18:34:43 javascript elm custom-element bootstrap-select bootstrap-selectpicker 前端开发

具有Web组件的应用程序的全局CSS

我正在开发一个使用HTML 5本机Web组件的Web应用程序.我的问题是，所有这些都有很多通用的CSS，并且我使用超赞的字体来显示漂亮的图标.现在，我将所有样式放入"/deep"阴影穿孔中，但Chrome表示:"/deep/combinator已弃用."您是否对如何在整个应用程序中使用全局CSS和CSS库(例如超棒的字体)有任何建议? 谢谢:) 解决方案 您可以使用 ..

发布时间：2021-04-26 20:23:19 css html web-component shadow-dom custom-element 前端开发