Javascript 如何使用CSS“；“目标”；使用lit-html的web组件中的选择器_Javascript_Css_Web Component_Shadow Dom_Lit Html

Javascript 如何使用CSS“；“目标”；使用lit-html的web组件中的选择器

javascript css

Javascript 如何使用CSS“；“目标”；使用lit-html的web组件中的选择器,javascript,css,web-component,shadow-dom,lit-html,Javascript,Css,Web Component,Shadow Dom,Lit Html,我正在使用lit-html在我的项目中创建自定义web组件。我的问题是，当我尝试在web组件中使用CSS目标选择器时，它不会被触发，但是当我在没有自定义组件的情况下使用它时，代码工作得非常好。有人能解释一下为什么会发生这种情况，以及解决这个问题的方法吗？这是我的密码：目标测试元素.js: import { LitElement, html} from '@polymer/lit-element'; class TargetTest extends LitElement { render

我正在使用lit-html在我的项目中创建自定义web组件。我的问题是，当我尝试在web组件中使用CSS目标选择器时，它不会被触发，但是当我在没有自定义组件的情况下使用它时，代码工作得非常好。有人能解释一下为什么会发生这种情况，以及解决这个问题的方法吗？这是我的密码：

目标测试元素.js:

import { LitElement, html} from '@polymer/lit-element';

class TargetTest extends LitElement {

  render(){
    return html`
      <link rel="stylesheet" href="target-test-element.css">
        <div class="target-test" id="target-test">
        <p>Hello from test</p>
    </div>
    `;
  }
}
customElements.define('target-test-element', TargetTest);

.target-test{
    background: yellow;
}

.target-test:target {
    background: blue;
}

<!DOCTYPE html>

<head>
 ...
</head>

<body>
    <target-test-element></target-test-element>
    <a href="#target-test">Link</a>
</body>

</html>

我在index.html中创建了一个链接：

index.html（带有自定义组件）：

import { LitElement, html} from '@polymer/lit-element';

class TargetTest extends LitElement {

  render(){
    return html`
      <link rel="stylesheet" href="target-test-element.css">
        <div class="target-test" id="target-test">
        <p>Hello from test</p>
    </div>
    `;
  }
}
customElements.define('target-test-element', TargetTest);

.target-test{
    background: yellow;
}

.target-test:target {
    background: blue;
}

<!DOCTYPE html>

<head>
 ...
</head>

<body>
    <target-test-element></target-test-element>
    <a href="#target-test">Link</a>
</body>

</html>

...

这是一个有效的例子：

index.html（不含自定义组件）


...
你好

LitElement使用阴影DOM渲染其内容。阴影DOM隔离内部定义的CSS样式，并防止使用CSS选择器从外部选择内部内容。因此，

：target

伪类将无法工作

相反，您可以使用标准（普通）自定义元素而不是LitElement

无阴影DOM时：

类TargetTest扩展HtmleElement{
connectedCallback（）{
this.innerHTML=`
你好，我是考官
`
}
}
自定义元素。定义（'target-test-element'，TargetTest）

.test{背景：黄色}
.test:目标{背景：蓝色}

通过设置属性本身的id，您的意思是，我将在css中使用id选择器#test，而在javascript中，我将id属性从#component1更改为#test吗？重新阅读后，我道歉。我将立即删除该评论。然而，我建议，在你的回答中进行编辑，使其更加清晰，因为流程可能会像我所做的那样被误读。也许有一行文字解释了阴影DOM不需要Lit（见上图）。或者更好的方法是，将不带灯光的阴影DOM放置在无阴影DOM/无灯光代码上方。只是想帮点忙。