自定义HTML标记和CSS
[英]Custom HTML tags and CSS
问题描述
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: 
我正在使用自定义HTML标记<spin-loader> ，它封装了一些CSS样式和一些div来形成Windows 8加载微调器：
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). 它使用ShadowDOM（如图中所示）隐藏客户端的div ，并允许它们只使用一个标签来获取复杂元素（没有额外的JS，CSS或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; 我想要发生的是能够在元素上使用CSS以受控方式更改某些样式/特征; 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. 例如， background-color会改变圆圈的背景（ div s），增加宽度也会增加圆圈的大小。 Is this possible? 这可能吗？
Edit: I forgot to mention that most CSS styles (such as background as shown in the picture) don't work anyway. 编辑：我忘了提到大多数CSS样式（如图中所示的background ）无论如何都不起作用。 Here's a link to the spinner: http://cryptolight.cf/curve.html 这是一个指向微调器的链接： http ： //cryptolight.cf/curve.html
2 个解决方案
解决方案1
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. 我相信您无法定位具有css特殊字符的标签。
解决方案2
2 已采纳 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. 你的spin-loader标签没有大小调整，因为它的root div子节点没有子节点会给它一个大小。 Remember, you gave all your div sa position: absolute property. 记住，你给了你所有的div sa position: absolute属性。
Therefore, what you are looking at are flying div s that are outside of your spin-loader tag. 因此，你所看到的是飞行div在你的spin-loader标签之外。 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: 如果你希望你的spin-loader的css属性直接影响你的小盘旋div的样式，这里是一个示例实现：
New CSS Properties for <spin-loader> : <spin-loader> 新CSS属性 ：
-
font-sizeis the size of your little circles (default is5px)font-size是小圆圈的大小（默认为5px） -
coloris the color of your little circles (default isinherit)color是你的小圆圈的颜色（默认是inherit） - The tag's default size is
8em² (defaults to40px² iffont-size: 5px)标签的默认大小为8em²（默认为40px²如果font-size: 5px）
New Implementation for <spin-loader> : <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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.