Question

我正在使用litelement中的css函数来分配一些值，像这样

    static get styles() {
    return css`
        .formaFabrica {
            stroke: var(--svg-lente-stroke);
            stroke-width: var(--svg-forma-width);
        }
    `}

它工作正常，但是当我在devtools中查看它时，我看到了

CSS变量已由为其分配的值替换。

这使修改样式表变得更加困难，因为我们需要转到源代码中了解变量名称。

令人惊讶的是，其他样式不受影响。

是否有可能在开发工具中看到原始数据？

Answer 1

那里有有趣的“问题” ...似乎唯一可以重现此问题的方法是在同一CSS“定义”中添加变量定义。

将变量值添加到host后，它就可以正常工作。对我来说似乎是一个浏览器错误：/

将其放在主机上可能是有效的解决方法。

下面是我用来复制的代码-打开它并检查不同的路径以查看其结果。

如果您需要“外部” css变量，可以通过在主机中“重新映射”它来解决它

:host {
  --good-variable: var(--external-variable);
}

<script>
  // can be used to disable constructable styleheets on chrome
  // delete Document.prototype.adoptedStyleSheets;
</script>

<style type="text/css">
  html {
    --svg-stroke-from-external: #ff0000;
  }
</style>

  
<script type="module">
import { LitElement, html, css } from 'https://unpkg.com/lit-element?module';

class SimpleGreeting extends LitElement {
  static get styles() {
    return css`
        :host {
          --svg-stroke-width: 10px;
          --svg-stroke-from-host: #ff0000;
          --svg-stroke-from-host-mapped-from-external: var(--svg-stroke-from-external);
        }
        .formaFabrica {
            --svg-stroke-from-same-rule: #ff0000;
            stroke: var(--svg-stroke-from-same-rule);
            stroke-width: var(--svg-stroke-width);
        }
        .formaFabrica2 {
            stroke: var(--svg-stroke-from-host);
            stroke-width: var(--svg-stroke-width);
        }
        .formaFabrica3 {
            stroke: var(--svg-stroke-from-external);
            stroke-width: var(--svg-stroke-width);
        }       
        .formaFabrica4 {
            stroke: var(--svg-stroke-from-host-mapped-from-external);
            stroke-width: var(--svg-stroke-width);
        }        
        
        /* demo formatting */
        div { float: left; }
    `;
  }

  render() {
    return html`
      <div>
        <h4>variable definition on same element</h4>
        <svg height="210" width="400">
          <path d="M150 0 L75 200 L225 200 Z" class="formaFabrica" />
        </svg>
        <p>Results in: </p>
        <pre>
          stroke: #ff0000;
        </pre>
      </div>
      <div>
        <h4>variable definition on host</h4>
        <svg height="210" width="400">
          <path d="M150 0 L75 200 L225 200 Z" class="formaFabrica2" />
        </svg>
        <p>Results in: </p>
        <pre>
          stroke: var(--svg-stroke-from-host);
        </pre>
      </div>
      <div>
        <h4>variable definition via "external" css</h4>
        <svg height="210" width="400">
          <path d="M150 0 L75 200 L225 200 Z" class="formaFabrica3" />
        </svg>
        <p>Results in: </p>
        <pre>
          stroke: #ff0000;
        </pre>
      </div>   
      <div>
        <h4>variable definition via "external" css</h4>
        <svg height="210" width="400">
          <path d="M150 0 L75 200 L225 200 Z" class="formaFabrica4" />
        </svg>
        <p>Results in: </p>
        <pre>
          stroke: var(--svg-stroke-from-host-mapped-from-external);
        </pre>
      </div>         
    `;
  }
}

customElements.define('simple-greeting', SimpleGreeting);
</script>

<simple-greeting></simple-greeting>

Liteelelement CSS函数中的CSS变量

1 个答案: