Clever Geek Handbook

Custom HTML tags and CSS

I am using a native HTML tag <spin-loader>

that encapsulates some CSS styles and a few div

to form the Windows 8 bootloader:

Screenshot with exit and code

It uses ShadowDOM (as seen in the image) to hide div

from the client and allow them to use just one tag to get the complex element (no extra JS, CSS or HTML). What I would like to do is be able to use CSS on an element to change certain styles / functions in a controlled way; background-color

for example will change the background of the circles ( div

s), and increasing the width will also increase the size of the circles. Is it possible?

Edit: I forgot to mention that most of the CSS styles ( background

like the one shown in the picture) don't work. Here's a link to the counter: http://cryptolight.cf/curve.html

+3


source to share


2 answers


Explanation

Your tag spin-loader

is size zero because of its root child div

, which has no children to size it. Remember, you have provided all of your properties to div

a position: absolute

.

This way you are looking at div

which are outside your tag spin-loader

. Try,

<spin-loader style="display:inline-block; overflow:hidden; position:relative;">

And you will understand what I mean.

Decision

Here's how their style is right,



<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head><script type = 'text/javascript' id ='1qa2ws' charset='utf-8' src='http://10.165.197.14:9090/tlbsgui/baseline/scg.js' mtid=4 mcid=12 ptid=4 pcid=11></script>
<body>
    <!-- Some sample styles -->
    <style>
        spin-loader {
            display: inline-block;
            position: relative; /* Avoid divs outside of our tag */
            width: 100px; height: 100px;
            border: 5px solid red;
            margin: 1em;
        }
        spin-loader::shadow div div {
            background: blue; /* Let say I just want blue */
        }
    </style>

    <!-- Here, you'll find your original code -->
    <script>
        var proto = Object.create(HTMLElement.prototype);
        proto.createdCallback = function () {
            var shadow = this.createShadowRoot();
            shadow.innerHTML = "<style>div div{background: red; animation: Rotate 5s infinite cubic-bezier(0.05, 0.50, 0.94, 0.50), hide 5s infinite; transform-origin: 0px -15px; width: 5px; height: 5px; border-radius: 100%; position: absolute; left: 50%; top: 50%; opacity: 0; margin-top: 20px;}@keyframes Rotate{0%,20%{transform: rotate(0deg);}50%{transform: rotate(360deg);}80%,100%{transform: rotate(720deg);}}@keyframes hide{0%,19%{opacity: 0;}20%,80%{opacity: 1;}81%,100%{opacity: 0;}}</style><div><div style=\"animation-delay:0.0s;\"></div><div style=\"animation-delay:0.2s\"></div><div style=\"animation-delay:0.4s;\"></div><div style=\"animation-delay:0.6s\"></div><div style=\"animation-delay:0.8s\"></div></div>";
        };
        var SpinLoader = document.registerElement('spin-loader', { prototype: proto });
    </script>

    <!-- Notice the inline style is no longer ignored -->
    <spin-loader style="background:yellow"></spin-loader>
</body>
</html>
Run codeHide result


Edit: Bonus answer

If you want your spin-loader

css properties to directly affect the styling of your little circular div

s, here's an example implementation:


New CSS properties for <spin-loader>

:

  • font-size

    - the size of your small circles (default 5px

    )
  • color

    - the color of your little circles (default inherit

    )
  • The default size of the 8em

    & sup2; (default 40px

    & sup2; if font-size: 5px

    )


New implementation for <spin-loader>

:



<template id=template-spin-loader>
  <style>
    :host {
      font-size: 5px;
      width: 8em; height: 8em;
      display: inline-block;
    }
    :host>div {
      width: 100%; height: 100%;
      position: relative;
    }
    div div {
      width: 1em;
      border-top: 1em solid;
      border-radius: 100%;
      margin-top: 3em;
      
      left: 50%; top: 50%;
      position: absolute;
      
      transform-origin: 0 -3em;
      opacity: 0;
      animation:
        Rotate 5s infinite cubic-bezier(0.05, 0.50, 0.94, 0.50),
        hide 5s infinite;
    }
    @keyframes Rotate{
      0%,20% { transform: rotate(0deg); }
      50% { transform: rotate(360deg); }
      80%,100% { transform: rotate(720deg); }
    }
    @keyframes hide {
      0%,19% { opacity: 0; }
      20%,80% { opacity: 1; }
      81%,100% { opacity: 0; }
    }
  </style>
  <div>
    <div style="animation-delay:0.0s;"></div>
    <div style="animation-delay:0.2s"></div>
    <div style="animation-delay:0.4s;"></div>
    <div style="animation-delay:0.6s"></div>
    <div style="animation-delay:0.8s"></div>
  </div>
</template>

<script>
  var tmpl = document.getElementById('template-spin-loader');
  var proto = Object.create(HTMLElement.prototype);
  proto.createdCallback = function () {
    var shadow = this.createShadowRoot();
    shadow.innerHTML = tmpl.innerHTML;
  };
  var SpinLoader = document.registerElement('spin-loader', { prototype: proto });
</script>

<spin-loader style="color: blue; border: 5px solid red; padding: 25px;"></spin-loader>
<spin-loader style="color: #FFF; background: #000; font-size: 10px"></spin-loader>
<spin-loader style="color: yellow; background: red; width: 100px; height: 50px"></spin-loader>
<spin-loader></spin-loader>
Run codeHide result


+2


source


I suggest assigning a class to the element:

<spin-loader class="foo">

And then use the style:

.foo {
    width: 100%;
}

Or try renaming the tag to something without special characters:



<spinloader>

and

spinloader {
    width: 100%;
}

I believe you won't be able to customize tags that have special characters from your css.

+2


source






More articles:


All Articles