Question

我用Javascript创建了一个custom element，并且在我的自定义元素中是类型范围的输入。现在，我要设置样式，但无法正常工作。

我尝试用Javascript以及链接到我的HTML页面的外部CSS文件设计元素的样式。我使用::-webkit-slider-thumb来设置拇指的样式，因为我希望它是一个圆形。

(function(){

    const template = document.createElement("template");
    template.innerHTML = `
    <style>

    </style>
    <input type="range" min="-100" max="100" value="0">
    `;

class SliderElement extends HTMLElement {

    constructor() {
        super();
        let shadowRoot = this.attachShadow({mode: 'open'});
        this.shadowRoot.appendChild(template.content.cloneNode(true));
    }

    connectedCallback() {

    }

}

customElements.define('slider-element', SliderElement);

})();

<!doctype html>

<html lang="de">
<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="css/style.css">
  <script src="js/slider.js" defer></script>
</head>
<body>
  <slider-element></slider-element>
</body>
</html>

当我尝试使用<slider-element>为::-webkit-slider-thumb设置样式时，我希望它可以工作。如果可以在style.css中设置自定义元素的样式，那就太好了。

Answer 1

使用阴影DOM时，样式会在“阴影边界”处停止。阴影根外部的样式将不适用于其中的元素。 As per html5rocks（他以h3元素为例，强调了他的意思）：

此页面上还有其他h3，但唯一与   h3选择器（因此样式为红色）是ShadowRoot中的选择器。   同样，默认情况下，作用域样式。



此页面上定义的其他针对h3的样式规则不会渗入我的内容。这是因为选择器不会越过阴影边界。

因此，您必须在template.innerHTML中包含的样式标签内为自定义元素定义样式。例如（我从here获得了滑块的样式）：

template.innerHTML = `
<style>
    input[type=range]{
        -webkit-appearance: none;
    }
    input[type=range]::-webkit-slider-runnable-track {
        width: 300px;
        height: 5px;
        background: #ddd;
        border: none;
        border-radius: 3px;
    }
    input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        border: none;
        height: 16px;
        width: 16px;
        border-radius: 50%;
        background: goldenrod;
        margin-top: -4px;
    }
</style>
<input type="range" min="-100" max="100" value="0">
`;

JSFiddle here

如何在shadowtree内设置<input type =“ range”>的样式？

1 个答案: