Fatal编程技术网
  • javascript/
  • Javascript 我如何设计一个<；输入类型="；“范围”&燃气轮机；在暗影树里面？

Javascript 我如何设计一个<；输入类型="；“范围”&燃气轮机；在暗影树里面？

javascript html css

Javascript 我如何设计一个<；输入类型="；“范围”&燃气轮机；在暗影树里面？,javascript,html,css,Javascript,Html,Css,我用Javascript创建了一个，在我的自定义元素中有一个类型为range的输入。现在我想设计它，但它不起作用 我尝试用Javascript和链接到我的HTML页面的外部CSS文件设计元素的样式。 我使用：：-webkit滑块thumb来设置thumb的样式，因为我希望它是一个圆 (function(){ const template = document.createElement("template"); template.innerHTML = ` <st

我用Javascript创建了一个，在我的自定义元素中有一个类型为range的输入。现在我想设计它，但它不起作用

我尝试用Javascript和链接到我的HTML页面的外部CSS文件设计元素的样式。 我使用
：：-webkit滑块thumb
来设置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);

})();

（函数（）{
const template=document.createElement（“模板”）；
template.innerHTML=`
`;
类SliderElement扩展了HtmleElement{
构造函数（）{
超级（）；
让shadowRoot=this.attachShadow（{mode:'open'}）；
this.shadowRoot.appendChild（template.content.cloneNode（true））；
}
connectedCallback（）{
}
}
自定义元素。定义（'slider-element'，SliderElement）；
})();
当我尝试使用
：-webkit滑块thumb
设置
样式时，我希望它能正常工作。如果我可以在
style.css

中设置自定义元素的样式，那就太好了。使用阴影DOM时，样式会在“阴影边界”处停止。阴影根以外的样式不会应用于阴影根内的元素。（他以
h3
元素为例，强调他的）：

  • 此页面上还有其他H3，但唯一与 h3选择器，因此样式为红色，是ShadowRoot中的选择器。 同样，默认情况下，使用范围样式

  • 此页面上定义的其他样式规则，目标H3不会渗入我的内容。这是因为选择器不会跨越阴影边界

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

template.innerHTML=`
输入[类型=范围]{
-webkit外观：无；
}
输入[类型=范围]：-webkit滑块可运行轨迹{
宽度：300px；
高度：5px；
背景：ddd；
边界：无；
边界半径：3px；
}
输入[类型=范围]：-webkit滑块拇指{
-webkit外观：无；
边界：无；
高度：16px；
宽度：16px；
边界半径：50%；
背景：一枝黄花；
利润上限：-4px；
}
`;
JSFiddle

@Alex有帮助吗？ 
<!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>

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">
`;