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

Why aren't NavBar Image Links Functional, even though the code seems flawless? What could be the issue?

What is the best way to ensure that the viewBox of an SVG perfectly matches the size of the image it overlays?

Examples of how to specify a child class in CSS

CSS - borders are overlapping with one another

Tips for avoiding a button reverting to its original state upon page refresh

What is the process for encoding images in HTML code?

Experience the smooth CSS3 transition effects on iOS devices such as iPhones and iPads. Elevate the appearance of DOM objects with

What is the best way to ensure that third tier menus open in line with their respective items?

Creating a for loop using jQuery to append the value of [i] to the string "id" for the element

Several features - Second function malfunctioning

How can HTML be added in CodeBehind using C# in a WebForm?

Adjust the path of an element as it decreases in size

Ways to reduce the width of a flex box

What is the best way to create a personalized image as the background in WordPress using CSS for a client?

Ensure that the content fills the entire height of the container and include a scrollbar

Attaching onchange event to a select menu

What could be causing the submission failure of the form post validation?

Explore our interactive map and widget features that will seamlessly fill your browser window for a

Issue with scroll down button functionality not functioning as expected

How to make browsers refresh cached images