Трафарет JS | Применение стилей хоста к компоненту - PullRequest
Новая
       8

Трафарет JS | Применение стилей хоста к компоненту

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

Я пытаюсь применить стили с веб-сайта, где включен компонент stencilJS ... но не знаю как. 

import { Component } from '@stencil/core';

@Component({
  tag: 'menu-component',
  styleUrl: 'menu-component.css',
  shadow: true
})

export class MyComponent {

 render() {
    return (
      <div>
        <h1>Hello World</h1>
        <p id="red">This is JSX!</p>
      </div>
    );
  }
}

Компонент включен следующим образом: 

<link rel="stylesheet" href="css/main.css" type="text/css" />
<script src='https://unpkg.com/component@0.0.2/dist/mycomponent.js'></script>
<my-component></my-component>

В моем файле main.css у меня есть что-то вроде этого: 

#red{
    color: red;
}

Мне бы хотелось, чтобы стиль был применен к элементу из компонента трафарета. Это возможно?

Ответы [ 3 ]

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

Вы должны иметь возможность использовать селектор psuedo :host в своей таблице стилей, чтобы применять стили уровня хоста: 

:host {
    style: value
}

Вы можете легко ввести @stencil.sass для своих таблиц стилей, ссылка здесь: https://github.com/ionic-team/stencil-sass/blob/master/readme.md

Это даст вам большую функциональность с вашими стилями в трафарете.

EDIT:

Я неправильно понял, и теперь вижу, что вы хотите манипулировать за пределами компонента. Вы можете добавить элемент <slot /> в свой веб-компонент и добавить элементы в определенном стиле снаружи DOM веб-компонентов. Ссылка здесь: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot

0 голосов
/ 26 апреля 2019

Для этого вы можете использовать переменные css . Посмотрите на следующие примеры кода:

index.html

<my-component style="--text-color:red;"></my-component>

мой-component.css 

#red {
    color: var(--text-color, black);
}

В стиле компонента вы назначаете переменную CSS в качестве значения для цвета текста класса [id="red"]. В вашем приложении вы теперь можете изменить цвет, установив значение переменной.

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

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

Ранее существовали некоторые CSS-директивы для "прокола теней", такие как /deep/ и ::shadow, но они устарели и больше не работают.

Так что это примерно так и должно быть.

Теперь для обходных путей:

  • создайте общий CSS-файл и включите его как в ваш компонент, так и в ваше приложение - или
  • установить стиль, используя javascript из вашего хост-приложения, используя свойство shadowRoot: 
var div = document.querySelector('#comp').shadowRoot.querySelector('div#red');
div.style['color'] = 'red';
...