Setting font sizes using CSS values according to the Shadow DOM root element

Question

Setting font sizes using CSS values according to the Shadow DOM root element

Summary of the problem:

I am searching for a method to establish font size values based on an element inside a shadow dom relative to the shadow host, regardless of the parent element's font size within the shadow dom. I am looking for a solution similar to using em-values but with the shadow as the root instead of the HTML root.

The purpose of this is to scale content such as widgets that are inserted with shadow dom in one centralized location. By scaling properties based on font size in this manner, the entire widget can be scaled uniformly without needing to adjust numerous CSS values to fit different contexts.

Detailed description of the issue:

I am seeking a way to size text (font size) based on a specific element in the DOM, allowing for the scaling of different parts of content within that element based on its wrapping element. This functionality extends beyond just text sizing—it also benefits from basing various CSS values on font size to ensure visual layout components scale proportionately with text size changes, such as padding, border radius, and shadows. Relying solely on em-values can become convoluted when dealing with multiple levels of font size inheritance within elements. Adjusting the font-size of the first level without impacting subsequent levels requires manipulating individual em values throughout the DOM structure, which is not ideal in many cases.

An effective alternative is leveraging Root EM (rem) units so that altering one DOM level does not impact sub-elements. However, if I wish to increase or decrease the text size within a specific wrapping element without affecting other page elements, it becomes necessary to adjust rem-values for all font sizes within elements contained within that wrapping element.

...

html css dom web-component

Answer 1

Answer №1

After carefully examining the Web Component documents, it is evident that your proposed example does not resemble a web component at all. Consider the following example of a proper web component:

In the header of your document:

<link rel="import" href="web_component_name.html"></link>

In the body of your document:

<my-web-component>Bob</my-web-component>

Remember, your web component should have its own dedicated file.

<html>
  <template id="nameTagTemplate">
    <style>
    .outer {
      border: 2px solid brown;
      border-radius: 1em;
      background: red;
      font-size: 20pt;
      width: 12em;
      height: 7em;
      text-align: center;
    }
    .boilerplate {
      color: white;
      font-family: sans-serif;
      padding: 0.5em;
    }
    .name {
      color: black;
      background: white;
      font-family: "Marker Felt", cursive;
      font-size: 45pt;
      padding-top: 0.2em;
    }
    </style>
    <div class="outer">
      <div class="boilerplate">
        Hi! My name is
      </div>
      <div class="name">
        <content></content>
      </div>
    </div>
  </template>
  <script>
    var importDoc = document.currentScript.ownerDocument;
    var nameBadgePrototype = Object.create(HTMLElement.prototype);
    nameBadgePrototype.createdCallback = function() {
      var shadow = this.createShadowRoot();
      var template = importDoc.querySelector('#nameTagTemplate');
      shadow.appendChild(template.content.cloneNode(true));
    };
    document.registerElement("my-web-component", {
      prototype: nameBadgePrototype
    });
  </script>
</html>

Your intended purpose is clearly different from what a Web Component entails. It seems that you are actually interested in implementing Web Components based on our interaction. Please note this code will only work if specific flags are enabled in your Chrome Canary web browser. Default settings will not suffice, and users must activate the necessary beta settings for functionality. Even within an intranet environment, I advise against utilizing web components at this stage due to their beta nature, posing potential challenges with maintenance for multiple internal users. User behavior can also impact these components adversely as they tend to tinker with browser settings frequently, causing disruptions to new features.

Answer 2

After carefully examining the Web Component documents, it is evident that your proposed example does not resemble a web component at all. Consider the following example of a proper web component:

In the header of your document:

<link rel="import" href="web_component_name.html"></link>

In the body of your document:

<my-web-component>Bob</my-web-component>

Remember, your web component should have its own dedicated file.

<html>
  <template id="nameTagTemplate">
    <style>
    .outer {
      border: 2px solid brown;
      border-radius: 1em;
      background: red;
      font-size: 20pt;
      width: 12em;
      height: 7em;
      text-align: center;
    }
    .boilerplate {
      color: white;
      font-family: sans-serif;
      padding: 0.5em;
    }
    .name {
      color: black;
      background: white;
      font-family: "Marker Felt", cursive;
      font-size: 45pt;
      padding-top: 0.2em;
    }
    </style>
    <div class="outer">
      <div class="boilerplate">
        Hi! My name is
      </div>
      <div class="name">
        <content></content>
      </div>
    </div>
  </template>
  <script>
    var importDoc = document.currentScript.ownerDocument;
    var nameBadgePrototype = Object.create(HTMLElement.prototype);
    nameBadgePrototype.createdCallback = function() {
      var shadow = this.createShadowRoot();
      var template = importDoc.querySelector('#nameTagTemplate');
      shadow.appendChild(template.content.cloneNode(true));
    };
    document.registerElement("my-web-component", {
      prototype: nameBadgePrototype
    });
  </script>
</html>

Your intended purpose is clearly different from what a Web Component entails. It seems that you are actually interested in implementing Web Components based on our interaction. Please note this code will only work if specific flags are enabled in your Chrome Canary web browser. Default settings will not suffice, and users must activate the necessary beta settings for functionality. Even within an intranet environment, I advise against utilizing web components at this stage due to their beta nature, posing potential challenges with maintenance for multiple internal users. User behavior can also impact these components adversely as they tend to tinker with browser settings frequently, causing disruptions to new features.

Answer 3

Answer №2

The selector known as :host is used to apply styles to the element that acts as the host for the shadow root. This functions similarly to styling the host element using external CSS or inline styles (such as

<div id="rootelm" style="font-size:20px"></div>

in the example provided below). By utilizing the :host selector instead of a pseudo-selector like :root, you can achieve the desired outcome. Here is an illustration:

<!DOCTYPE HTML>
<html style="font-size: 16px">
    <body style="font-size: 12px">
        I am 12px large

        <div style="font-size: 1.5em">
            I am 18px large
        </div>
        <div style="font-size: 1.5rem">
            I am 24px large
        </div>

        <div id="rootelm"></div>

        <template id="testtemplate">
            <style>
                :host{ /* New selector defined */
                    font-size: 20px; /* Represents the "template root fontsize" */
                }
            </style>
            <div style="font-size: 1em">
                I am 20px large
                <!-- Absolute size comparison -->
                <div style="font-size: 20px">I am also 20px large</div>
                <div style="font-size: 2em">
                    I am 40px large
                    <!-- Absolute size comparison -->
                    <div style="font-size: 40px">I am also 40px large</div>
                </div>
            </div>
        </template>

        <script>
            var shadow = document.querySelector('#rootelm').createShadowRoot();
            var template = document.querySelector('#testtemplate');
            shadow.innerHTML = template.innerHTML;
        </script>
    </body>
</html>

View plunker

UPDATE: The featured plunker has been enhanced with JavaScript to ensure font sizes are relative to the hosting element of the shadow root. The script details are provided below.


function updateFontSizes() {
    var rootElm = document.querySelector("#rootelm");
    var styledElms = rootElm.shadowRoot.querySelectorAll('[style]');
    var rootFontSize = window.getComputedStyle(rootElm, null).getPropertyValue("font-size");
    rootFontSize = parseFloat(rootFontSize.substring(0, rootFontSize.indexOf('px')).trim());
    
    for (var i = 0; i < styledElms.length; i++) {
        var unitIndex = styledElms[i].style.fontSize.indexOf('rem');
        var oldFS = styledElms[i].getAttribute("oldfs");
        
        if (unitIndex > -1) {
            styledElms[i].setAttribute("oldfs",styledElms[i].style.fontSize);
            styledElms[i].style.fontSize = parseFloat(styledElms[i].style.fontSize.substring(0, unitIndex).trim()) * rootFontSize + "px";
        } else if (oldFS !== null) {
            styledElms[i].style.fontSize = parseFloat(oldFS.substring(0, oldFS.indexOf('rem')).trim()) * rootFontSize + "px"
        }
    }
}

var mql = window.matchMedia("(max-width: 500px)");
mql.addListener(handleMediaQuery);
handleMediaQuery(mql);

function handleMediaQuery(mql) {
    updateFontSizes();
}

Answer 4

The selector known as :host is used to apply styles to the element that acts as the host for the shadow root. This functions similarly to styling the host element using external CSS or inline styles (such as

<div id="rootelm" style="font-size:20px"></div>

in the example provided below). By utilizing the :host selector instead of a pseudo-selector like :root, you can achieve the desired outcome. Here is an illustration:

<!DOCTYPE HTML>
<html style="font-size: 16px">
    <body style="font-size: 12px">
        I am 12px large

        <div style="font-size: 1.5em">
            I am 18px large
        </div>
        <div style="font-size: 1.5rem">
            I am 24px large
        </div>

        <div id="rootelm"></div>

        <template id="testtemplate">
            <style>
                :host{ /* New selector defined */
                    font-size: 20px; /* Represents the "template root fontsize" */
                }
            </style>
            <div style="font-size: 1em">
                I am 20px large
                <!-- Absolute size comparison -->
                <div style="font-size: 20px">I am also 20px large</div>
                <div style="font-size: 2em">
                    I am 40px large
                    <!-- Absolute size comparison -->
                    <div style="font-size: 40px">I am also 40px large</div>
                </div>
            </div>
        </template>

        <script>
            var shadow = document.querySelector('#rootelm').createShadowRoot();
            var template = document.querySelector('#testtemplate');
            shadow.innerHTML = template.innerHTML;
        </script>
    </body>
</html>

View plunker

UPDATE: The featured plunker has been enhanced with JavaScript to ensure font sizes are relative to the hosting element of the shadow root. The script details are provided below.


function updateFontSizes() {
    var rootElm = document.querySelector("#rootelm");
    var styledElms = rootElm.shadowRoot.querySelectorAll('[style]');
    var rootFontSize = window.getComputedStyle(rootElm, null).getPropertyValue("font-size");
    rootFontSize = parseFloat(rootFontSize.substring(0, rootFontSize.indexOf('px')).trim());
    
    for (var i = 0; i < styledElms.length; i++) {
        var unitIndex = styledElms[i].style.fontSize.indexOf('rem');
        var oldFS = styledElms[i].getAttribute("oldfs");
        
        if (unitIndex > -1) {
            styledElms[i].setAttribute("oldfs",styledElms[i].style.fontSize);
            styledElms[i].style.fontSize = parseFloat(styledElms[i].style.fontSize.substring(0, unitIndex).trim()) * rootFontSize + "px";
        } else if (oldFS !== null) {
            styledElms[i].style.fontSize = parseFloat(oldFS.substring(0, oldFS.indexOf('rem')).trim()) * rootFontSize + "px"
        }
    }
}

var mql = window.matchMedia("(max-width: 500px)");
mql.addListener(handleMediaQuery);
handleMediaQuery(mql);

function handleMediaQuery(mql) {
    updateFontSizes();
}

Answer 5

Answer №3

Referring to a DOM object as a "shadow root" is misleading. What you actually have is another DOM element branching off the root. The HTML5 tag template does not hold any special significance, and there is no such thing as a "shadow root." Various methods exist for injecting a document into another, including iframes, object tags, and element tags. However, it is not recommended as it can disrupt proper parsing of the document and lead to numerous future issues.

The optimal approach would be to create a CSS DOM element with preset attributes and use CSS to modify sub-items based on your styling preferences. By defining a DOM element template in CSS with a base style, you can easily manage the styling of nested elements.

CSS file

template{
    font-size: 20px;
}

html file

<template>
   <div style="font-size: 1.5trem">
       I am 30px large
       <div style="font-size: 2trem">
           I am 40px large
       </div>
   </div>
</template>

This code snippet sets any DOM element named template to a font size of 20px, with all child elements adjusting their font sizes relative to their parent. Additionally, it is advisable to avoid using inline styles and utilize CSS selectors for more efficient styling.

Answer 6

Referring to a DOM object as a "shadow root" is misleading. What you actually have is another DOM element branching off the root. The HTML5 tag template does not hold any special significance, and there is no such thing as a "shadow root." Various methods exist for injecting a document into another, including iframes, object tags, and element tags. However, it is not recommended as it can disrupt proper parsing of the document and lead to numerous future issues.

The optimal approach would be to create a CSS DOM element with preset attributes and use CSS to modify sub-items based on your styling preferences. By defining a DOM element template in CSS with a base style, you can easily manage the styling of nested elements.

CSS file

template{
    font-size: 20px;
}

html file

<template>
   <div style="font-size: 1.5trem">
       I am 30px large
       <div style="font-size: 2trem">
           I am 40px large
       </div>
   </div>
</template>

This code snippet sets any DOM element named template to a font size of 20px, with all child elements adjusting their font sizes relative to their parent. Additionally, it is advisable to avoid using inline styles and utilize CSS selectors for more efficient styling.

Setting font sizes using CSS values according to the Shadow DOM root element

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to invert the positioning of the li elements to move upwards?

Tips for creating a div element with a header and scrollable section

CSS query: How to eliminate the extra space at the top of a webpage?

What is the best method to ensure that none of the select option values are left empty?

Discovering the presence of line breaks

Google API integration in Chrome Extension Manifest

jQuery - encountering issues setting CSS properties within an AJAX callback function

Creating various styles for cards using ngFor within Angular

The file reader feature is currently experiencing issues on both Chrome and Internet Explorer browsers

Tips for adjusting the positioning of a div element in a responsive design

React JS makes it simple to create user-friendly cards that are optimized

Creating a div with a fixed size in Tailwind CSS: A beginner's guide

Guide to modify target blank setting in Internet Explorer 8

How can I change the cursor of a button to a pointer in Bootstrap 4 when the button is not disabled?

div is consistently correct across all web browsers

I'm curious, which effect or plugin is being used here?

Troubleshooting issue with RadioButton check change not updating in onPost event in ASP.Net project utilizing Bootstrap HTML and C

Ways to eliminate the Horizontal scroll bar

Modify Knockout applyBindings to interpret select choices as numeric values

Obtaining the Span value inside a DIV when the text in the DIV is selected - JavaScript