Использование шаблона начальной загрузки с ванильными веб-компонентами - PullRequest
Новая
       11

Использование шаблона начальной загрузки с ванильными веб-компонентами

0 голосов
/ 18 января 2019

У меня есть традиционный веб-сайт ASP.NET MVC, который использует шаблон Metronic Bootstrap.

Теперь я подумываю переписать этот веб-сайт с использованием подхода Vanilla Web Components.

Итак, я провел небольшой тест и написал веб-компонент без shadow dom, и, похоже, мой компонент просто использует стиль Metronic, поэтому он наследует его от родительской страницы, где я его включил.

Однако, когда я включаю теневой DOM, распространение CSS прекращается, и теперь мой веб-компонент больше не использует стиль Metronic.

В настоящее время я немного не уверен в том, как справиться с этой ситуацией.Я просто не могу использовать теневой DOM, но я не использую всю мощь и инкапсуляцию веб-компонентов.

Итак, как бы вы справились с ситуацией, когда у вас есть большой шаблон Bootstrap, который вы хотите использовать в сочетании с веб-компонентами?Стоит ли оно того?Существуют ли рекомендации для такой ситуации?

1 Ответ

0 голосов
/ 18 января 2019

Если вам нужно использовать большую структуру CSS в веб-компонентах на основе ShadowDOM, вам нужно включить этот CSS в каждый компонент или, по крайней мере, часть CSS, необходимую для этого компонента.

ShadowDOM был разработан для предотвращения воздействия внешнего CSS на внутренний ShadowDOM. Итак, если вам нужен конкретный CSS внутри ShadowDOM, вы должны поместить его туда.

Самое простое, что нужно сделать - включить тег <link> в ShadowDOM. Тот же тег <link>, который вы использовали за пределами компонентов. 

class MyElement extends HTMLElement {
  constructor() {
    super();
    let shadow = this.attachShadow({mode: 'open'});
    shadow.innerHTML = `
    <link href="my.css" rel="stylesheet">
    <h2 class="my-header">My Component</h2>
    <button class="my-button">Pay me</button>`;
  }
}

customElements.define('my-element', MyElement);
<link href="my.css" rel="stylesheet">
<div class="my-thing">Stuff</div>
<button class="my-button">Click me</button>
<hr/>
<my-element></my-element>

Поскольку у меня нет файла my.css, вы не увидите изменений.

Это позволит вам включить CSS на вашей странице, а также в ваши компоненты.

...