如何在扩展HTMLElement的类中应用带有setAttribute的类样式？

问题描述

我有一个类，我添加了一个带有类名的元素，该类名应使我以CSS样式定义的文本变白，但事实并非如此。文本保持黑色。除了手动设置元素的CSS之外，我应该如何实现？

class TestClass extends HTMLElement {
  constructor() {
    super();
    var shadow = this.attachShadow({
      mode: 'open'
    });

    var title = document.createElement('h5');
    title.setAttribute('class','whiteText');
    title.innerText = "Test text"
    shadow.appendChild(title);
  }
}
customElements.define('test-el',TestClass);
var container = document.getElementById("container")
container.innerHTML = ""
container.appendChild(new TestClass());

body {
  background-color: black;
  margin: 0;
}

.whiteText {
  font-family: Helvetica,sans-serif;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id='container'>
</div>

解决方法

修复CSS。

body { 
  background-color:black;
  margin: 0; 
}
.whiteText {
    font-family: Helvetica,sans-serif;
    color:white;
}

添加以添加类，这是更简单的方法

title.classList.add("whiteText");
// or
title.classList.toggle("whiteText");

,

您已将h5元素添加到阴影dom，因此不应用样式。

要应用样式，需要在阴影dom内定义独立的<style>标签，如下所示。

class TestClass extends HTMLElement {
  constructor() {
    super();
    var shadow = this.attachShadow({
      mode: 'open'
    });
    var title = document.createElement('h5');
    title.setAttribute('class','whiteText');
    title.innerText = "Test text"
    shadow.appendChild(title);
    
    var style = document.createElement('style');
    style.innerHTML = '.whiteText { font-family: Helvetica,sans-serif; color: white; }';
    shadow.appendChild(style);
  }
}
customElements.define('test-el',TestClass);
var container = document.getElementById("container")
container.innerHTML = ""
container.appendChild(new TestClass());

body {
  background-color: black;
  margin: 0;
}

<div id='container'>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>