@yuebai008/cli
Version:
Command line interface for rapid qg-minigame development
8 lines • 1.05 kB
JavaScript
import*as ComponentHelpers from"../../../ui/components/helpers/helpers.js";import*as LitHtml from"../../../ui/lit-html/lit-html.js";import computedStyleTraceStyles from"./computedStyleTrace.css.js";const{render:render,html:html}=LitHtml;export class ComputedStyleTrace extends HTMLElement{static litTagName=LitHtml.literal`devtools-computed-style-trace`;#e=this.attachShadow({mode:"open"});#t="";#s=!1;#o=()=>{};#a;connectedCallback(){this.#e.adoptedStyleSheets=[computedStyleTraceStyles]}set data(e){this.#t=e.selector,this.#s=e.active,this.#o=e.onNavigateToSource,this.#a=e.ruleOriginNode,this.#l()}#l(){render(html`
<div class="computed-style-trace ${this.#s?"active":"inactive"}">
<span class="goto" @click=${this.#o}></span>
<slot name="trace-value" @click=${this.#o}></slot>
<span class="trace-selector">${this.#t}</span>
<span class="trace-link">${this.#a}</span>
</div>
`,this.#e,{host:this})}}ComponentHelpers.CustomElements.defineComponent("devtools-computed-style-trace",ComputedStyleTrace);