自定義HTML標記和CSS
[英]Custom HTML tags and CSS
問題描述
我正在使用自定義HTML標記<spin-loader> ，它封裝了一些CSS樣式和一些div來形成Windows 8加載微調器：
它使用ShadowDOM（如圖中所示）隱藏客戶端的div ，並允許它們只使用一個標簽來獲取復雜元素（沒有額外的JS，CSS或HTML）。 我想要發生的是能夠在元素上使用CSS以受控方式更改某些樣式/特征; 例如， background-color會改變圓圈的背景（ div s），增加寬度也會增加圓圈的大小。 這可能嗎？
編輯：我忘了提到大多數CSS樣式（如圖中所示的background ）無論如何都不起作用。 這是一個指向微調器的鏈接： http ： //cryptolight.cf/curve.html
2 個解決方案
解決方案1
2 2015-07-23 19:46:02
我建議給元素一個類：
<spin-loader class="foo">
然后設置樣式：
.foo {
width: 100%;
}
或者嘗試將標記重命名為沒有特殊字符的內容：
<spinloader>
和：
spinloader {
width: 100%;
}
我相信您無法定位具有css特殊字符的標簽。
解決方案2
2 已采納 2015-07-23 22:03:52
說明
你的spin-loader標簽沒有大小調整，因為它的root div子節點沒有子節點會給它一個大小。 記住，你給了你所有的div sa position: absolute屬性。
因此，你所看到的是飛行div在你的spin-loader標簽之外。 嘗試，
<spin-loader style="display:inline-block; overflow:hidden; position:relative;">
你會明白我的意思。
解
這是如何正確地設計它們，
<!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>
編輯：獎金答案
如果你希望你的spin-loader的css屬性直接影響你的小盤旋div的樣式，這里是一個示例實現：
<spin-loader> 新CSS屬性 ：
-
font-size是小圓圈的大小（默認為5px） -
color是你的小圓圈的顏色（默認是inherit） - 標簽的默認大小為
8em²（默認為40px²如果font-size: 5px）
<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>
HTML中“模板”標簽，“內容”標簽和自定義元素標簽之間的區別
[英]Difference between “template” tags, “content” tags and custom element tags in HTML
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.