在 Shadow DOM 中使用 :root

Question

在 Shadow DOM 中使用 :root

tcv*_*duc 6 html javascript css shadow-dom

我一直在努力Shadow DOM，然后遇到了一个问题。
我使用:root {}语法来声明一些CSS variables. 但不幸的是，它不起作用。
这是我的代码

在1.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Shadow DOM</title>
</head>
<body>
  <square-element></square-element>
  <script src="./1.js"></script>
</body>

Run Code Online (Sandbox Code Playgroud)

在1.js：

const htmlCode = `
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Shadow DOM</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 24px;
    }

    :root {
      --bg-color: cornflowerblue;
    }

    body {
      width: 100%;
      height: 100vh;
      background-color: antiquewhite;
    }

    .square {
      width: 500px;
      height: 500px;
      border: 5px solid #000;
      background-color: var(--bg-color);
    }
  </style>
</head>
<body>
  <div class="square"></div>
</body>
</html>`;

customElements.define(
"square-element",
class extends HTMLElement {
  connectedCallback() {
    const shadow = this.attachShadow({ mode: "open" });

    shadow.innerHTML = htmlCode;
  }
});

Run Code Online (Sandbox Code Playgroud)

我可以用CSS :root {}来装饰一些变量Shadow DOM吗？

Answer 1

Dan*_*man 8

ShadowDOM 是一个DocumentFragment
与 IFRAME 不同，您不能将整个<html>构造转储到其中
:root将在文档中使用
:host从 ShadowRoot 内部使用，以定位宿主元素<square-element>
:host/<square-element>本身是一个（内联块）容器元素；
无需<div>在内部添加额外的“容器”元素

<square-element>1</square-element>
<square-element selected>2</square-element>
<square-element color="purple">3</square-element>

<style>
  :root {
    --border-color: grey;
  }
</style>

<script>
  customElements.define( "square-element", class extends HTMLElement {
      constructor() {
        super().attachShadow({mode:"open"}).innerHTML = 
        `<style>
          :host {
            --bg-color: ${this.getAttribute("color") || "teal"}; 
            display:inline-block;
            width:  100px; 
            height: 100px;
            border: 5px solid var( --border-color , red  );
            background-color: var( --bg-color     , pink );
            border-radius: var(--radius,20px);
            font:30px Arial;
            text-align:center;
            color:beige;
          }
          :host([selected]) { --bg-color: green }
          :host([color])    { --radius: 50px }
          :host(:hover)     { --border-color: gold; cursor: grab }
        </style><slot></slot>`;
      }
    });
</script>

Run Code Online (Sandbox Code Playgroud)

归档时间：	3 年，2 月前
查看次数：	1564 次
最近记录：	3 年，2 月前