css - 在上下文中将 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: "\10f09d"; }

<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>

• https://cdn.blue/<shin>/docs/ShinElement.html
• https://codepen.io/cetinsert/pen/QWLZgwZ?editors=1000

---

需要js-update (HTML), jsUpdate (JS) 做直播CSS 编辑很不幸。

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

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