正在将类添加到影子根中的元素

Adding class to element inside shadow root

本文关键字：元素 影子 添加      更新时间：2023-09-26

我只是想在影子根中的元素中添加一个类。我使用咖啡脚本在原子内部执行此操作。。。这是我班里的问题片段。

createChatTab: (chatTitle = defaultChatTitle) ->
  chatTab = document.createElement('gh-chat-tab')
  chatTab.id = "thisWillBeAUniqueID"
  chatTab.innerText = chatTitle
# Add click event
chatTab.addEventListener 'click', =>
  @.className = "open"
# Add to shadowDom
@theBar.appendChild(chatTab)
# Clear the chat tab
chatTab = null

我已经创建了这个元素，并添加了一个点击事件，然后将其附加到我的影子根元素中，然后清除原始变量。

在运行时，该元素在影子根目录中显示良好，并且控制台日志显示单击事件确实运行，但是没有添加"open"类？

解决：我自己设法解决了这个问题：答案如下。

通过将胖区域更改为细箭头来解决此问题！

# Add click event
  chatTab.addEventListener 'click', ->
  @.className = 'open'

我已经设法将一个类添加到Web组件的影子根中的现有元素中（必须处于打开模式）。

const host = document.querySelector('component-name');
const firstElement = host.shadowRoot.firstElementChild;
firstElement.classList.add('classname');

阴影中的DOM遍历有点棘手，但根元素应该有助于确定CSS的范围。

相关文章：