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

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

0 голосов
/ 01 декабря 2018

Я использую освещенный HTML для создания пользовательских веб-компонентов в моем проекте.И моя проблема в том, что когда я пытаюсь использовать селектор цели CSS в веб-компоненте, он не будет срабатывать, но когда я делаю это без пользовательского компонента, код работает отлично.Может ли кто-то пролить свет на то, почему это происходит, и на то, как обойти эту проблему?Вот мой код:

target-test-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);

со следующим стилем:

target-test-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>

1 Ответ

0 голосов
/ 02 декабря 2018

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