在上下文中将 CSS 个变量相互关联

Question

背景：尝试创建一个元素以便轻松地将 Font Awesome 5.10.2 Duotone 图标嵌入到任何 HTML.

中

此图标元素使用 HTML 属性，这些属性应映射到特定图标，其中映射完全由 CSS 作者控制。

<x pay></x> <!-- <- icon value for pay should be customizable by CSS author -->

以下是我的解决方案，但我想知道...

可以减少一个吗

x {
  position: relative; 
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  white-space: nowrap;
  font-family: var(--fa-5-d);
  font-weight: var(--fa-d);
  background: var(--x-background);
  line-height: 1em !important;
}
x::after { position: absolute; left: 0; bottom: 0; }
x::before { color: var(--fa-primary-color,   inherit); opacity: 1; opacity: var(--fa-primary-opacity,   1.0); }
x::after  { color: var(--fa-secondary-color, inherit);             opacity: var(--fa-secondary-opacity, 0.4); }

x:before { --fa-credit-card:   "\f09d"; }
x:after  { --fa-credit-card: "f09d"; }

<x pay></x>

这个↓

x[pay]:before,
x[pay]:after { content: var(--fa-credit-card); }

到此↓（避免x[pay]:before, x[pay]:after重复）

x[pay] { --content: var(--fa-credit-card); }

本质上

在父项上设置一个 CSS 变量一次为一个值 v
与 v?

v₁

v₂

?

Answer 1

使用网络组件/自定义元素的便利性改进：

<link  href='//cdn.blue/{fa-5.10.2}/css/all.css' rel=stylesheet>
<link  href='//cdn.blue/{fa+}/var.css' rel=stylesheet>
<link  href='//cdn.blue/{fa+}/x-i.css' rel=stylesheet>
<script src='//cdn.blue/<shin>/shin-element.js'></script>

<script>
class XI extends ShinElement {
  constructor() { 
    super(`<style></style>`);
    ShinElement.IPA(this, 'jsUpdate', { a: 'js-update', t: ShinElement.Number0 });
  }
  connectedCallback() { XI.css(this); }
  static css(t) {
    const c =   getComputedStyle(t);
    const i = c.getPropertyValue('--i').trim();
    const s = t._.QS("style");
          s.textContent = `:host:before, :host:after { content: var(${i}); }`;
  }
  static get observedAttributes() { return [ 'js-update' ]; }
  attributeChangedCallback(a, o, n) {
    switch (a) {
      case "js-update":
        const u =  this.jsUpdate;
        if (u > 0) this._jsu = setInterval(XI.css, u, this);
        else { clearInterval(this._jsu); delete this._jsu; }
        break;
    }
  }
}
XI.define();
</script>

<style>x-i[pay] { --i: --fa-user-edit; }</style>

      <x-i pay js-update=200 id=x></x-i>

不幸的是，需要 js-update (HTML)、jsUpdate (JS) 进行实时 CSS 编辑。

x.jsUpdate = 0; // to disable getComputedStyle updates

因此我仍然想知道是否有更好的解决方案 - 仅 CSS 或使用 Web 组件。

在上下文中将 CSS 个变量相互关联

Relate CSS variables to each other in context

css

pseudo-element

css-variables