title: why is this vanilla Js HTMLEl.style = " " not working?
body: <p>I work in a big Vue project, I was trying to switch classes =&gt; couldn't so tried something easier ( testing purposes only) =&gt; change El style with.style.
  So, the idea here is to switch the form backgroundColor when focus state is active on certain input... I was able to switch that same Input bgColor with this eventListener but never the form. Here's the code:</p>
  <pre><code>&lt;template&gt;
    &lt;form @submit.prevent ref=&quot;formElement&quot; class=&quot;w-full form&quot;&gt;
      &lt;h1
        class=&quot;mt-5 mb-3 text-2xl text-primary font-bold capitalize md:mt-0 md:mb-5 md:text-3xl&quot;
      &gt;
        {{ t('fullNameForm.title') }}
      &lt;/h1&gt;
      &lt;p class=&quot;mb-5 text-sm text-secondary md:mb-10&quot;&gt;
        {{ t('fullNameForm.description') }}
      &lt;/p&gt;
      &lt;div class=&quot;flex flex-col gap-y-4&quot;&gt;
        &lt;Input
          id=&quot;firstName&quot;
          autocomplete=&quot;given-name&quot;
          :errors=&quot;v$.firstName.$errors&quot;
          v-model.trim=&quot;v$.firstName.$model&quot;
        &gt;
          {{ t('firstName') }}
        &lt;/Input&gt;
        &lt;Input
          id=&quot;lastName&quot;
          autocomplete=&quot;family-name&quot;
          :errors=&quot;v$.lastName.$errors&quot;
          v-model.trim=&quot;v$.lastName.$model&quot;
        &gt;
          {{ t('lastName') }}
        &lt;/Input&gt;
      &lt;/div&gt;
      &lt;div
        class=&quot;w-full h-24 px-4 py-6 absolute left-0 bottom-0 sm:static sm:px-0&quot;
      &gt;
        &lt;Button
          type=&quot;submit&quot;
          :loading=&quot;loading&quot;
          :disabled=&quot;v$.$invalid&quot;
          class=&quot;w-full h-12 capitalize&quot;
          @click=&quot;submit()&quot;
        &gt;
          {{ t('next') }}
        &lt;/Button&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/template&gt;
  
  &lt;script lang=&quot;ts&quot;&gt;
  import { defineComponent, ref, reactive, onMounted } from 'vue'
  import { useStore } from 'vuex'
  import { useI18n } from 'vue-i18n'
  import useVuelidate from '@vuelidate/core'
  import { required, minLength, maxLength } from '@vuelidate/validators'
  
  import Input from '@/components/Input.vue'
  import Button from '@/components/ButtonV2.vue'
  
  export default defineComponent({
    name: 'FullNameForm',
    components: {
      Input,
      Button
    },
    emits: ['submit'],
    setup(props, { emit }) {
      const store = useStore()
      const { t } = useI18n()
  
      // focus events don't bubble, must use capture phase
      // document.body.addEventListener(
      //   'focus',
      //   e =&gt; {
      //     const target = e.target
      //     {
      //       document.body.classList.add('keyboard')
      //     }
      //   },
      //   true
      // )
      // document.body.addEventListener(
      //   'blur',
      //   () =&gt; {
      //     document.body.classList.remove('keyboard')
      //   },
      //   true
      // )
      const formElement = ref&lt;HTMLElement | null&gt;(null)
      const formEl = document.querySelector('.form') as HTMLElement | null
      onMounted(() =&gt; {
        window.addEventListener('keydown', event =&gt; {
          if (event.key === 'Enter') submit()
        })
        const lastnameInput = document.querySelector(
          '#lastName'
        ) as HTMLElement | null
        if (lastnameInput || formEl) {
          lastnameInput?.addEventListener('focus', () =&gt; {
            lastnameInput.style.backgroundColor = 'red'
            if (formElement.value &amp;&amp; formEl &amp;&amp; lastnameInput) {
              formElement.value.style.backgroundColor = 'orange'
              formElement.value.classList.add('keyboard')
              formEl.style.backgroundColor = 'gray'
            }
          })
        }
      })
  
      return {
        t,
        form,
        v$,
        loading,
        submit,
        formElement
      }
    }
  })
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  .form.keyboard {
    background: rgb(81, 179, 146);
  }
  &lt;/style&gt;
  </code></pre>
  <p>I discovered 2 things:</p>
  <ol>
  <li>the second if never works</li>
  <li>Any formEl or formElement in the first if doesn't work because it's a possible null Element, I already tried to switch operators =&gt; || to &amp;&amp; =&gt; Nothing works, even the input stop reacting.`</li>
  </ol>