3

我正在使用 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);

具有以下样式：

目标测试元素.css：

.target-test{
    background: yellow;
}

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

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

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

2 回答 2

2

LitElement 使用 Shadow DOM 来呈现其内容。Shadow DOM 隔离了内部定义的 CSS 样式，并防止使用 CSS 选择器从外部选择内部内容。出于这个原因，:target伪类将不起作用。

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

没有 Shadow 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>

或者，如果您仍想使用 Shadow 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>

于 2018-12-01T23:31:52.773 回答
0

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

  1. 使用 lit 元素但不使用 shadowDOM，在 Lit 元素中调用createRenderRoot()方法
createRenderRoot () {
    return this
  }
  1. 而是使用 :target 处理 CSS 逻辑，我正在处理元素上的属性（使用 Lit 很容易做到），例如。在 CSS 中激活并使用它：
element[active] {
   /* CSS rules */
}

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

于 2021-09-10T10:07:18.187 回答