admin 管理员组

文章数量: 1086019

I am using a shadow DOM for CSS isolation. I want the rem font size to use the HTML element font size in the shadow DOM.

The font in <div class="shadow-div">shadow DOM font (should be 100px)</div> should be 100px but the rem size is still 16px.

Here is a small code snippet demonstrating what I want to do.

<style>
  html {
    font-size: 16px;
  }
</style>
<div>light dom font</div>

<div id="root"></div>

<script>
  const root = document.getElementById('root');
  root.attachShadow({ mode: 'open' });

  const html = document.createElement('html')
  html.innerHTML = `
            <head>
                <style>
                    html {
                        font-size: 100px;
                    }

                    .shadow-div {
                        font-size: 1rem;
                    }
                </style>
            </head>
            
            <body>
                <div class="shadow-div">shadow dom font (should be 100px)</div>
            </body>
        `;

  root.shadowRoot.appendChild(html);
</script>

I am using a shadow DOM for CSS isolation. I want the rem font size to use the HTML element font size in the shadow DOM.

The font in <div class="shadow-div">shadow DOM font (should be 100px)</div> should be 100px but the rem size is still 16px.

Here is a small code snippet demonstrating what I want to do.

<style>
  html {
    font-size: 16px;
  }
</style>
<div>light dom font</div>

<div id="root"></div>

<script>
  const root = document.getElementById('root');
  root.attachShadow({ mode: 'open' });

  const html = document.createElement('html')
  html.innerHTML = `
            <head>
                <style>
                    html {
                        font-size: 100px;
                    }

                    .shadow-div {
                        font-size: 1rem;
                    }
                </style>
            </head>
            
            <body>
                <div class="shadow-div">shadow dom font (should be 100px)</div>
            </body>
        `;

  root.shadowRoot.appendChild(html);
</script>

  • javascript
  • html
  • css
  • shadow-dom
Share Improve this question edited Aug 30, 2021 at 20:56 TylerH 21.1k78 gold badges79 silver badges114 bronze badges asked Feb 11, 2021 at 1:15 web program manweb program man 432 silver badges3 bronze badges 1
  • So remove the font-size from .shadow-div, or set it to inherit explicitly …? – C3roe Commented Feb 11, 2021 at 12:12
Add a ment  | 

1 Answer 1

Reset to default 10

shadowRoots are not Documents, so don't have <html><head><body> markup;
shadowRoots are more like DocumentFragments

You style shadow content based from the :host selector; and since shadow DOM is encapsulated, there is less need for classes to target that one DIV

REMs are always based on the html definition; use em instead inside the Component

Also note how inheritable properties, like color 'trickle down' into Components and do style content inside shadowDOM (font-size also, but you overload it in the Component in this code)
see: https://lamplightdev./blog/2019/03/26/why-is-my-web-ponent-inheriting-styles/

That simplifies your code to:

<style>
  html { font-size: 10px }
  body { font-size: 3rem; color:green }
</style>

<div>3rem body font-size = 3 * html font-size</div>
<div id="root"></div>

<script>
  document.getElementById('root')
    .attachShadow({ mode: 'open' })
    .innerHTML = `<style>
                    :host { font-size: 50px }
                    div   { font-size: 2rem }
                    p     { font-size: .5em }
                 </style>
                 50px Component font-size
                 <div>2rem = 2 * html font-size = 20px</div>
                 <p>.5em = .5 * :host font-size = 25px</p>`;
</script>

本文标签： javascriptChange shadow dom rem sizeStack Overflow

版权声明：本文标题：javascript - Change shadow dom rem size - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744094569a2532658.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。