如何使用 lit html 在 Web 组件中使用 CSS "target" 选择器

Question

我正在使用 lit html 在我的项目中创建自定义 Web 组件。我的问题是，当我尝试在 Web 组件中使用 CSS 目标选择器时，它不会被触发，但是当我在没有自定义组件的情况下执行此操作时，代码可以完美运行。有人可以阐明为什么会发生这种情况以及解决此问题的方法是什么吗？这是我的代码：

目标测试-element.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);

具有以下样式：

目标测试-element.css:

.target-test{
    background: yellow;
}

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

我在 index.html 中创建了一个 link:

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

<!DOCTYPE html>

<head>
 ...
</head>

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

</html>

这是有效的：

index.html（没有自定义组件）

<!DOCTYPE html>
<head>
    ...
</head>
<body>
    <a href="#target-test">Link</a>
    <div class="target-test" id="target-test">
        Hello
    </div>
</body>
</html>

Answer 1

LitElement 使用阴影 DOM 来呈现其内容。 Shadow DOM 隔离内部定义的 CSS 样式，并防止使用 CSS 选择器从外部选择内部内容。因此，:target 伪 class 将不起作用。

相反，您可以使用标准（原版）自定义元素代替 LitElement。

没有阴影DOM:

class TargetTest extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `
      <div>
        <span class="test" id="target-test">Hello from test</span>
      </div>`
  }
}
customElements.define('target-test-element', TargetTest)

.test { background: yellow } 
.test:target { background: blue }

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

或者，如果您仍想使用阴影 DOM，则应将 id 属性设置为自定义元素本身。假设自定义元素中只有一个目标。

class TargetTest extends HTMLElement {
  connectedCallback() {
    this.attachShadow( { mode: 'open' } ).innerHTML = `
      <style>
        :host( :target ) .test { background-color: lightgreen }
      </style>
      <div>
        <span class="test">Hello from test</span>
      </div>`
  }
}
customElements.define('target-test-element', TargetTest)

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

Answer 2

有点晚了，我遇到了同样的问题！所以我遵循两条路径之一：

使用没有 shadowDOM 的 lit 元素，要在 Lit 元素中调用方法 createRenderRoot()

createRenderRoot () {
    return this
  }

而是使用 :target 处理 CSS 逻辑，我正在处理元素上的属性（使用 Lit 很容易做到）例如。激活并在 CSS:

element[active] {
   /* CSS rules */
}

这些是我目前的解决方案！希望对你有帮助...

如何使用 lit html 在 Web 组件中使用 CSS "target" 选择器

How to use CSS "target" selector in web components using lit html

javascript

css

web-component

shadow-dom

lit-html