Polymer `<custom-style>`: какая строка кода перестает добавлять в DOM несколько импортов одного и того же модуля шаблона нестандартного стиля? - PullRequest
Новая
       19

Polymer `<custom-style>`: какая строка кода перестает добавлять в DOM несколько импортов одного и того же модуля шаблона нестандартного стиля?

5 голосов
/ 20 апреля 2019

Тема исходных веб-компонентов моего проекта реализована в виде <custom-style> элементов ссылка

Я хочу реализовать свои переопределения уровня документа в виде JS-модуля (например, избегать жесткого кодирования в приложении index.html или эквивалентном), что на первый взгляд выглядит просто: 

import '@vaadin/vaadin-lumo-styles/color.js';

const $template = document.createElement('template');

$template.innerHTML = `
<custom-style>
  <style>
  html,
  :host {
    --lumo-primary-color: red;
  }
  </style>
</custom-style>`;

document.head.appendChild($template.content);

ВОПРОС

Некоторые веб-компоненты, используемые в документе, также импортируют оригинальную тему через import '@vaadin/vaadin-lumo-styles/color.js'.

Я хочу, чтобы мои переопределения всегда каскадировались последними (без !important хаков).

Могут ли несколько последующих import '@vaadin/vaadin-lumo-styles/color.js'; вызовов вернуть мой каскадное свойство, переопределяющее каскад?

Подумайте:

  • оригинал: --lumo-primary-color: hsl(214, 90%, 52%);
  • me: импортировать оригинал, переопределить --lumo-primary-color: red;
  • позже: можно ли позднее импортировать исходный каскад «сброса» обратно в --lumo-primary-color: hsl(214, 90%, 52%);)?

ES6 импортирует файл в нескольких местах, почему файл загружается один раз? , кажется, подразумевает, может быть, нет, но я изо всех сил пытаюсь найти любую документацию, которая явно так или иначе заявляет о <custom-style>.

Возможно https://github.com/Polymer/polymer/blob/v3.2.0/lib/elements/custom-style.js#L80 это ключ?

GLITCH

https://glitch.com/edit/#!/roan-pizza?path=src/index.js, кажется, подтверждает, что повторный импорт не вызывает проблем, но почему? Это связано только с кэшированием загрузки модуля ES6 или с чем-то еще?

РЕДАКТИРОВАТЬ элементы drag-n-drop <custom-style> в инспекторе браузера определенно влияют на каскад (изменение цветов в зависимости от порядка тегов), поэтому, по крайней мере, порядок загрузки имеет значение.

1 Ответ

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

Советы: удалить все для редактирования.

  1. теги различий (из <custom-style>) на #id => <custom-style id="id01">.
  2. сохранить <custom-style> для редактирования => save(#id).
  3. red (в "--lumo-primary-color") - переменная => var color = red.
  4. удалить все содержимое <custom-style id="id01"> => remove_all(#id).
  5. добавьте новый контент, который вам нужен => как вы сделали выше.

Я просто надеюсь, что вы решите свою проблему.Ты лучше меня, поэтому я не буду писать код.

...