颜色是定制元素中的属性

Question

我正在使用LitElement构建自定义Web组件，并希望为其提供color属性。我已经可以使用该颜色了，但是已经对其进行了硬编码。我希望颜色根据用户的喜好而改变。例如， fhir-create- Patient>应该将元素的背景更改为红色。

    class FhirCreatePatient extends LitElement {
    static get properties() {
        return {
            /**url is used to make AJAX call to FHIR resource. Default: null */
            url: String,
            background:String
        }
    }

    constructor() {
        super();
        this.background=""
    }
    _didRender(){
        this.shadowRoot.getElementById("background").style.color = "blue"

    }


    _render({url}) {
        return html`
        <style>
        :host{
            font:sans-serif;
            display: block;
            border: 1px solid green;
            margin: 2px;
            padding:5px;
        }
        #patientRelation{
            display:block;
            border: 1px solid;
            margin:5px;
        }
        #patientMarriage{
            display:block;
            border:1px solid;
            padding:5px;
            margin:3px;
        }
        #patientGender{
            display:block;
            border:1px solid;
            padding:5px;
            margin:3px;  
        }
        #patientContact{
            display:block;
            border:1px solid;
            padding:5px;
            margin:3px; 
        }
        #patientAddress{
            display:block;
            border:1px solid;
            padding:5px;
            margin:3px; 
        }

        </style>
       <div id="background"> 
       <fhir-human-name id="patientName"></fhir-human-name>
       <fhir-active-status id="patientActive"></fhir-active-status>
       <fhir-decease-status id="patientDecease"></fhir-decease-status>
       <fhir-birth-date id="patientBirthday"></fhir-birth-date>
       <fhir-human-gender id="patientGender"></fhir-human-gender>
       <fhir-marital-status id="patientMarriage"></fhir-marital-status>
       <fhir-human-contact id="patientContact"></fhir-human-contact>
       <fhir-human-address id="patientAddress"></fhir-human-address>
       <fhir-human-language id="patientLanguage"></fhir-human-language>
       <fhir-human-relation id="patientRelation"></fhir-human-relation>
       <mwc-button id="button" raised on-click=${() => this.doPost()}>Submit</mwc-button>
       <iron-ajax bubbles method ="POST" id="ajax" url="${url}" on-response="handleResponse"></iron-ajax>
       <div>
    `;
    }

    doPost() {
        var pname = this.shadowRoot.getElementById('patientName').value;
        var pstatus = this.shadowRoot.getElementById('patientActive').value;
        var pdecease = this.shadowRoot.getElementById('patientDecease').value;
        var pbirth = this.shadowRoot.getElementById('patientBirthday').value;
        var pgender = this.shadowRoot.getElementById('patientGender').value;
        var pmarriage = this.shadowRoot.getElementById('patientMarriage').value;
        var pcontact = this.shadowRoot.getElementById('patientContact').value;
        var paddress = this.shadowRoot.getElementById('patientAddress').value;
        var planguage = this.shadowRoot.getElementById('patientLanguage').value;
        var prelation = this.shadowRoot.getElementById('patientRelation').value;
        this.shadowRoot.getElementById('ajax').contentType = 'application/json';
        this.shadowRoot.getElementById('ajax').body = {
            "resourceType": "Patient",
            "name": pname,
            "active": pstatus,
            "deceased": pdecease,
            "birthDate": pbirth,
            "gender": pgender,
            "maritalStatus": pmarriage,
            "telecom": pcontact,
            "address": paddress,
            "contact": prelation,
            "communication": planguage
        };
        this.shadowRoot.getElementById('ajax').generateRequest();
    }    


  }

window.customElements.define('fhir-create-patient', FhirCreatePatient);

谢谢

Answer 1

在您的情况下，最简单的解决方案是在背景中使用样式中的css变量，并在每次这样设置background属性时进行设置（请注意，函数名称可能会有所不同，因为您似乎使用的是预发行版版本而不是最新版本）

<custom-background></custom-background>
<custom-background background="seagreen"></custom-background>
<custom-background background="purple"></custom-background>

<script type="module">
import {
  html,
  css,
  LitElement
} from 'https://cdn.pika.dev/lit-element@^2.2.1';

export default class CustomBackground extends LitElement {
  static get properties() {
    return {
      background: { type: String }
    };
  }

  constructor() {
    super();
    this.background = "";
  }

  set background(value) {
    this.style.setProperty("--background", value);
  }

  get background() {
    this.style.getPropertyValue("--background");
  }

  static get styles() {
    // the name of the css variable should be more descriptive
    return css`
      .container {
        background: var(--background);
        line-height: 2;
      }
    `;
  }

  render() {
    return html`
      <div class="container">
        Some random content with background color: "${this.background}"
      </div>
    `;
  }
}

customElements.define("custom-background", CustomBackground);
</script>

Full working demo

[请注意，您实际上可以从整体上消除JS属性，而只是让您的用户直接设置css变量，它将正确设置样式，在这种情况下，类似于：

<custom-background style="--background: red;"></custom-background>

或只是像这样的css

custom-background.special {
  --background: blue;
}

只是一个额外的观察，如您在演示中所看到的，仅更改背景可能会弄乱对比度，因此您可能还希望允许更改文本颜色