-2

I'm trying with a thousand different css rules, but I can't find any that do what I require. I have a desire to edit a custom element in my css file after it is placed in the dom, but I can't, how can I do? If there is already a question asked, I apologize and please link it to me

class GacInput extends HTMLElement {
  constructor() {
    super();
    this.root = this.attachShadow({
      mode: 'open'
    });
    this.root.innerHTML = `
      <style>
        :host {
          display: flex;
          width: min-content;
        }
        input {
          display: block;
        }
      </style>
      <label></label>
      <input type="text">
    `;
  }
  static get observedAttributes() {
    return ['label', 'align'];
  }
  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'label') {
      this.root.querySelector('label').innerText = newValue;
    }
    if (name === 'align') {
      switch (newValue) {
        case "right":
          this.root.host.style.flexDirection = "row-reverse";
          break;
        case "top":
          this.root.host.style.flexDirection = "column";
          break;
        case "bottom":
          this.root.host.style.flexDirection = "column-reverse";
          break;
        default:
          this.root.host.style.flexDirection = "row";
      }
    }
  }
}
customElements.define('gac-input', GacInput);
gac-input::shadow label {
  background-color: blue;
}

gac-input /deep/ label {
  background-color: blue;
}

 :host(gac-input) label {
  background-color: blue;
}
<gac-input label="nome" align="top"></gac-input>
Francesco Pauselli
  • 27
  • 7
  • Your css is invalid. – Sfili_81 Feb 02 '23 at 16:29
  • 1
    `::shadow` and `/deep/` were both deprecated in Chome and IE around 2015/2016 [Read Here](https://developer.chrome.com/blog/remove-shadow-piercing/) – Zak Feb 02 '23 at 16:30
  • @Zak I figured it, how can I do it then? – Francesco Pauselli Feb 02 '23 at 16:38
  • 1
    Well researching for one .. It's only been 6 years, but I am sure there is plenty of documentation -- But here is an [interesting read](https://hackernoon.com/the-new-angular-ng-deep-and-the-shadow-piercing-combinators-deep-and-drop-4b088dbe459) to get you started – Zak Feb 02 '23 at 16:46
  • 1
    As Zak says, those old Google-only options to style shadowDOM never made it into the standard. There are CSS properties which tricle down into SD, there are ::parts, and constructable/adopted stylesheets have almost landed in all browsers: https://caniuse.com/mdn-api_document_adoptedstylesheets – Danny '365CSI' Engelman Feb 02 '23 at 16:57

1 Answers1

2

Not sure if this will help with your specific case, But my go-to for editing a css-property after the DOM is loaded is using variables.

For example:

:root {
    --custom-color: #000000;
    --flex-direction: column;
}

.element {
    background-color: var(--custom-color);
    flex-direction: var(--flex-direction);
}

And to change it via javascript:

const root = document.querySelector(':root');

root.style.setAttribute('--custom-color', '#999999');
Nibrock
  • 41
  • 3