聚合物` `:哪一行代码停止向DOM添加同一个自定义样式模板模块的多个导入?

问题描述 投票:5回答:1

我的项目的上游Web组件主题实现为<custom-style>元素link

我想实现我的文档级覆盖作为JS模块(如,避免硬编码到app 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);

文档中使用的一些Web组件也通过import '@vaadin/vaadin-lumo-styles/color.js'导入原始主题。

我希望我的覆盖总是最后级联(没有!important黑客)。

多个后来的import '@vaadin/vaadin-lumo-styles/color.js';调用是否有可能恢复我的CSS自定义属性覆盖级联?

认为:

  • 原文:--lumo-primary-color: hsl(214, 90%, 52%);
  • 我:导入原始,覆盖--lumo-primary-color: red;
  • 后来:可以稍后导入原来的“重置”级联回到--lumo-primary-color: hsl(214, 90%, 52%);)?

ES6 import a file in multiple place, why the file loads once?似乎暗示也许不是,但我正在努力寻找任何明确陈述<custom-style>某种方式的文档。

也许https://github.com/Polymer/polymer/blob/v3.2.0/lib/elements/custom-style.js#L80是关键?

毛刺

https://glitch.com/edit/#!/roan-pizza?path=src/index.js似乎证实重复进口似乎不会造成问题,但为什么呢?它纯粹是由于ES6模块加载缓存,还是还有其他东西呢?

在浏览器检查器中编辑拖放<custom-style>元素肯定会对级联产生影响(颜色根据标签顺序而变化),因此至少确认加载顺序很重要。

javascript polymer vaadin web-component es6-modules
1个回答
0
投票

提示:全部删除以进行编辑。

  1. 差异标签(<custom-style>)由#id => <custom-style id="id01">
  2. 保存<custom-style>编辑=> save(#id)
  3. 红色(在“--lumo-primary-color”中)是变量=> var color = red
  4. 删除<custom-style id="id01"> => remove_all(#id)的所有内容。
  5. 添加您需要的新内容=>如上所述。

我只希望你能解决你的问题。你比我好,所以我不会写代码。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.