How to Properly Update Component Css using traits !

[RakulAgn]

I have created a form block with a default declaration checkbox and a trait type of 'implicit' and 'explicit'. These traits determine the visibility of the component checkbox: if the trait type is 'implicit', the checkbox is hidden; if it's 'explicit', the checkbox is shown. I have implemented this functionality and it's working. However, the issue arises when I reload the page; it returns to the default state, even though I have properly enabled the storage manager.

here is the code what i did.

editor.TraitManager.addType(formDeclarationTrait, {
    noLabel: true,
    templateInput: () => '',
    createInput() {
      const el = document.createElement('div');

      el.innerHTML = `
      <div class="d-flex gap-2">
        <span class="text-dark fw-bold">Declaration Type</span>
        <select id=${declarationSelectId} class="form-select form-select-sm" >
          <option value="implicit">Implicit</option>
          <option value="explicit">Explicit</option>
        </select>
      </div>
      <div class="mt-5">
        <span class="text-dark fw-bold">Check Default:</span>
        <div class="form-check form-check-sm form-check-custom mt-2">
          <input id=${declarationCheckboxId} class="form-check-input cursor-pointer" type="checkbox" />
          <label id="form-check-label-text" class="form-check-label ms-2 text-dark">Check</label>
        </div>
      </div>`;

      // Select Event Listener
      el.querySelector(`#${declarationSelectId}`)?.addEventListener('change', () => {});

      // Input Event Listener
      el.querySelector(`#${declarationCheckboxId}`)?.addEventListener('change', () => {});

      return el;
    },
    onEvent({ elInput, component }) {
      const selectInputEl = elInput.querySelector(`#${declarationSelectId}`,) as HTMLSelectElement;

      const checkboxComponent = component.getEl()?.querySelector('#declaration-check-box') as HTMLInputElement;

      const valType = 'implicit' || 'explicit';

      stateManager.updateState({
        formDeclarationType: selectInputEl.value as typeof valType,
      });

      if (selectInputEl.value === 'implicit' && checkboxComponent) {
        checkboxComponent.style.display = 'none';
      } else if (selectInputEl.value === 'explicit' && checkboxComponent) {
        checkboxComponent.style.display = 'inline-block';
      }
    },
    onUpdate({ elInput, component }) {
      const selectInputEl = elInput.querySelector(`#${declarationSelectId}`,) as HTMLSelectElement;

      const checkbox = component.getEl()?.querySelector('#declaration-check-box') as HTMLInputElement;

      if (window.getComputedStyle(checkbox).display === 'inline-block') {
        selectInputEl.value = 'explicit';
      } else {
        selectInputEl.value = 'implicit';
      }
    },
  });

[RakulAgn]

@artf ?

[artf]

However, the issue arises when I reload the page; it returns to the default state, even though I have properly enabled the storage manager.

Well yeah... if you update the DOM directly sure it won't be saved.

You can update the style on Component level or via CSS Composer.