11
  • I have been working on Shadow DOM and then I meet a problem.
  • I use the :root {} syntax to declare some CSS variables . But unfortunately, it does not work.
  • Here is my code

  • On 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>

  • On 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; } });
  • Can I use CSS :root {} to decalre some varibales in Shadow DOM?
Improve this question

1 Answer 1

Reset to default
11

  • shadowDOM is a DocumentFragment
    Unlike IFRAMEs, you can't dump a whole <html> construct in there

  • :root is to be used in Documents

  • :host is used from inside a shadowRoot, to target the host element <square-element>

  • :host/<square-element> itself is a (inline-block) container element;
    no need to add an extra <div> inside as 'container' element

<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>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.