Custom HTML tags and CSS
Question
I am using a custom HTML tag <spin-loader> that encapsulates some CSS styles and a few div s to form the Windows 8 loading spinner:
It uses ShadowDOM (as seen in the image) to hide the div s from the client and allow them to use only one tag to get a complex element (no additional JS, CSS or HTML). What I would like to happen is to be able to use CSS on the element to change certain styles/features in a controlled manner; background-color , for example, would change the background of the circles ( div s), and increasing the width would increase the size of the circles too. Is this possible?
Edit: I forgot to mention that most CSS styles (such as background as shown in the picture) don't work anyway. Here's a link to the spinner: http://cryptolight.cf/curve.html
2 answers
solution1
2 2015-07-23 19:46:02
I suggest giving the element a class:
<spin-loader class="foo">
And then style it with:
.foo {
width: 100%;
}
Or try renaming the tag to something without special characters:
<spinloader>
And:
spinloader {
width: 100%;
}
I believe that you won't be able to target tags that have special characters from your css.
solution2
2 ACCPTED 2015-07-23 22:03:52
Explanation
Your spin-loader tag has zero sizing due to its root div child having no children that would give it a size. Remember, you gave all your div sa position: absolute property.
Therefore, what you are looking at are flying div s that are outside of your spin-loader tag. Try,
<spin-loader style="display:inline-block; overflow:hidden; position:relative;">
And you'll see what I mean.
Solution
Here's how to properly style them,
<!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's 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>
Edit: Bonus Answer
If you want your spin-loader s css properties to directly affect the styling of your little circling div s, here's an example implementation:
New CSS Properties for <spin-loader> :
-
font-sizeis the size of your little circles (default is5px) -
coloris the color of your little circles (default isinherit) - The tag's default size is
8em² (defaults to40px² iffont-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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.