Как использовать CSS "целевой" селектор в веб-компонентах, используя освещенный HTML

Question

Как использовать CSS "целевой" селектор в веб-компонентах, используя освещенный HTML

Я использую освещенный HTML для создания пользовательских веб-компонентов в моем проекте. И моя проблема в том, что когда я пытаюсь использовать селектор цели 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:

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>

3

javascript css web-component shadow-dom lit-html

Источник

user10558165 01 дек '18 в 16:52

2 ответа

Другие вопросы по тегам javascript css web-component shadow-dom lit-html

user4600982 01 дек '18 в 23:31 2018-12-01 23:31 · Answer 1 · 2018-12-01 23:31

LitElement использует Shadow DOM для визуализации своего контента. Shadow DOM изолирует стиль CSS, определенный внутри, и предотвращает выбор внутреннего содержимого из внешнего источника с помощью селекторов CSS. По этой причине :target псевдокласс не сработает.

Вместо этого вы можете использовать стандартный (ванильный) пользовательский элемент без Shaodow 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 свойство самого пользовательского элемента.

user2254905 10 сен '21 в 13:07 2021-09-10 13:07 · Answer 2 · 2021-09-10 13:07

Немного поздно, я испытал ту же проблему! Итак, я иду одним из двух путей:

Используйте освещенный элемент, но без shadowDOM, для этого в вашем элементе Lit вызовите метод createRenderRoot()

      createRenderRoot () {
    return this
  }

Вместо этого обрабатывайте логику CSS с помощью: target. Я обрабатываю атрибут элемента (это легко сделать с помощью Lit), например. active и используйте его в CSS:

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

Это мои решения на данный момент! Надеюсь, это поможет ...