Rem в веб-компоненте теневой дом - PullRequest
Новая
       14

Rem в веб-компоненте теневой дом

0 голосов
/ 19 марта 2019

Мы знаем, что мы можем установить font-size на html в качестве базы rem в обычных узлах DOM, и я использую этот прием, чтобы сделать мой шрифт моего приложения более гибким, динамически изменяемым с помощью js.

Однако, когда я создал веб-компонент, я обнаружил, что rem внутри теневого DOM всегда ссылается на 16px, хотя я пытался добавить стиль *{ font-size:72px } внутри теневого DOM. 16px - стандартный размер шрифта браузера по умолчанию.

Вот простая демонстрация: https://jsfiddle.net/qmacwb6r/

<html>
<head>
<script>
var template =`
<style>
* {
    font-size: 72px;
}
div {
    font-size:2rem;
}
</style>
<div>
    I am 2rem = 2*broser default
</div>
`
class TestTemplate extends HTMLElement {
    constructor(){
        super();
        this.rt = this.attachShadow({mode:"open"});
        this.rt.innerHTML = template;
    }
}
customElements.define("test-component", TestTemplate);
</script>
</head>
<body>
<test-component></test-component>
</body>
</html>

Я также пытался вызвать getRootNode() в консоли.

Для обычных DOM-узлов он возвращает HTMLElement, тогда как для теневых DOM-узлов он возвращает ShadowRoot, который, в отличие от HTMLElement, не может быть стилизован.

Можно ли сделать базовый шрифт rem узлов в теневой переменной DOM и управляемым?

1 Ответ

0 голосов
/ 19 марта 2019

Если я что-то упускаю1rem равно 100px.

Вот пример, где я установил font-size для html на 4 пикселя.А затем используйте rem значения в компоненте. 

var template = `
<style>
:host, :root { font-size: 48px; }
.rem2 { font-size:2rem; }
.rem3 { font-size:3rem; }
</style>
<p>I am 48px Times</p>
<div class="rem2">I am 2rem = 2*broser default</div>
<div class="rem3">I am 3rem = 3*broser default</div>
`;

class TestTemplate extends HTMLElement {
  constructor(){
    super();
    this.rt = this.attachShadow({mode:"open"});
    this.rt.innerHTML = template;
  }
}
customElements.define("test-component", TestTemplate);
html {
  font: 4px Courier;
}

body {
 font: 24px Tahoma;
}
<div>Before</div>
<test-component></test-component>
<div>After</div>
...