logo标签列表

自定义HTML标签和CSS

javascripthtmlcsscustom-controlsshadow-dom
3
我正在使用自定义HTML标签<spin-loader>，它封装了一些CSS样式和几个
以形成Windows 8加载旋转器：

Screenshot showing output and code

它使用 ShadowDOM（如图所示）来隐藏 div 元素，使客户端只能使用一个标签获取复杂元素（无需额外的 JS、CSS 或 HTML）。我希望能够在元素上使用 CSS 以控制方式更改某些样式/特性；例如，background-color 可以更改圆形（div）的背景颜色，并且增加宽度也会增加圆圈的大小。这可能吗？
编辑：我忘记提到大多数 CSS 样式（如图片中所示的 background）无论如何都不起作用。以下是旋转器的链接：http://cryptolight.cf/curve.html
为什么不给它一个类呢？ - user4563161
@dcdaz 我想要给用户完全自由的权利来改变设计的各个方面，而不会干扰基本设计。 - user3088260
2个回答
2

我建议给该元素添加一个类：

<spin-loader class="foo">

然后使用以下方式进行样式设置：

.foo {
    width: 100%;
}

或者尝试将标签重命名为不带特殊字符的名称：

<spinloader>

并且：

spinloader {
    width: 100%;
}

我认为你无法从CSS中定位带有特殊字符的标签。

HTML5规范对自定义标签命名有严格的指导方针，标签必须带有破折号以便于与原生标签区分开来。 - DividedByZero
2

解释

由于您的spin-loader标签的根div子元素没有任何子元素给它一个大小，因此它的大小为零。请记住，您给所有的div添加了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属性直接影响到您的小圆圈

的样式，这里有一个示例实现：


<spin-loader>的新CSS属性：

  • font-size是您的小圆圈的大小（默认为5px）
  • color是您的小圆圈的颜色（默认为inherit）
  • 标签的默认大小为8em²（如果font-size: 5px，则默认为40px²）


<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>

谢谢，如果我想操纵 background: yellow 的行为怎么办？例如，将其设置为使圆变成黄色？ - user3088260
@user3088260 我刚刚把圆圈变成了蓝色！ - Jason Sparc
是的，我知道如何做，但如果我想让<spin-loader style="background: yellow"></spin-loader>改变圆圈的颜色而不是背景呢？ - user3088260
@user3088260 老实说，我不知道。这里的规范（http://www.w3.org/wiki/WebComponents/）没有提到任何关于自定义 CSS 属性的内容，例如允许这样做的属性。 - Jason Sparc
我找到了解决背景问题的方法（在圆圈上使用background:inherit），但是还没有成功解决操作问题。 - user3088260
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接