小编tcv*_*duc的帖子

在 Shadow DOM 中使用 :root

  • 我一直在努力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: …
    Run Code Online (Sandbox Code Playgroud)

html javascript css shadow-dom

6
推荐指数
1
解决办法
1564
查看次数

标签 统计

css ×1

html ×1

javascript ×1

shadow-dom ×1