javascript - 样式加载事件后的 LitElement 阴影根

标签 javascript web-component shadow-dom lit-element lit-html

我有一个问题,我需要在 CSS 样式加载到我的组件中后处理事件。我试图使用 lit-element 生命周期,但它们仍然被提前解雇。

我正在尝试获取 DOM 元素的起始位置和其他数据,但我得到了一个初始位置,在加载样式后该位置会发生变化吗?

如何使样式首先加载或在样式加载后加载任何事件?

最佳答案

firstUpdated生命周期通常是您正在寻找的:

Called after the element’s DOM has been updated the first time, immediately before updated is called. Implement firstUpdated to perform one-time work after the element’s template has been created.

如果即使在 firstUpdated 被触发后您的元素仍在加载,您可以等待另一个周期以确保安全:

setTimeout(() => { /* code for checking DOM styles */ }, timeInMilliseconds);

timeInMilliseconds 可能只需要为 0,但您可能需要多给它一点时间,因为您的样式正在发生超出典型样式的变化。如果您有任何可能影响元素显示的 CSS animationtransition,也可能出现这种情况。

如果以上所有内容看起来正确,我建议在 lit-element github page 上打开一个问题因为它仍在积极贡献。

关于javascript - 样式加载事件后的 LitElement 阴影根,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60335267/

相关文章:

javascript - Shadow dom 中 <table> 子元素的使用

javascript - 是否可以证明 "overflow-x:scroll"div-container 中的可见性 div 元素?

JavaScript querySelectorAll() 仍然会发现已被删除的 DOM 元素

angular6 - 在 Angular 6 中扩展原生 HTML 元素

javascript - 可以使用 ShadowDOM 更改窗口/选项卡标题

css - :last-child of nested list using shadow dom

c# - 使用 C# 从服务器端访问 javascript 中的动态变量

javascript - 如何在 iOS 上的移动网络浏览器中使键盘触发调整大小事件?

javascript - 创建一个网络服务器控件来模仿 jquery 自动完成 API

seo - Google 抓取工具是否在索引之前等待页面完成?