Utilizing external clicks with Lit-Elements in your project

Question

Utilizing external clicks with Lit-Elements in your project

Currently, I am working on developing a custom dropdown web component using LitElements. In the process of implementing a feature that closes the dropdown when clicking outside of it, I have encountered some unexpected behavior that is hindering my progress. Inside the async firstUpdated() function, I have set up an event listener as per the guidelines mentioned in their documentation at this link. While logging out dropdown works fine, the issue arises when I try to log out target, as it returns the entire root element

<custom-drop-down>...</custom-drop-down>

each time, which although somewhat correct, lacks specificity. Any suggestions or alternative approaches to handle outside click events are welcome.

As a reference, I am attempting to replicate something similar to what has been already created (though the source code is not visible) at this link:

async firstUpdated() {
  await new Promise((r) => setTimeout(r, 0));
  this.addEventListener('click', event => {
    const dropdown = <HTMLElement>this.shadowRoot?.getElementById('dropdown-select');
    const target = <HTMLElement>event.target;
    if (!dropdown?.contains(target)) {
      console.log('im outside');
    }
  });
}    


@customElement('custom-drop-down')
public render(): TemplateResult {
  return html`
    <div>
      <div id="dropdown-select" @action=${this.updateValue}>
        <div class="current-selection" @click=${this.toggleDropdown}>
          ${this.value}
        </div>
        <div class="dropdown-options" id="dropdown-options">
          ${this.dropdownItems(this.options)}
        </div>
      </div>
    </div>
  `;
}

javascript typescript lit-element lit-html

Answer 1

Answer №1

The click event's target property is set to the topmost event target.

The highest element in the rendering order capable of being an event target is designated as the topmost event target.

Due to the encapsulation of its internal structure by shadow DOM, the event is retargeted to the host element. In this scenario, the click event's target is redirected to the custom-drop-down since it is the initial and uppermost element able to be a target.

If there is a necessity to target an element within the custom element, various approaches can be adopted:

Incorporate an event listener inside the element itself.
Utilize the <slot> element to populate the custom element with elements specified in the light DOM.
Employ the composedPath on events bearing composed: true to ascertain the internal element from which the event originated through bubbling.

An illustrative example demonstrating the desired functionality is provided below. By clicking on the Custom Element, it switches between active and inactive states (akin to toggling a dropdown). Clicking elsewhere on the page deactivates the custom element (similar to concealing a dropdown upon losing focus).

// Defining the custom element type
class MySpan extends HTMLSpanElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    
    const text = 'Custom Element.';
    const style = document.createElement('style');
    style.textContent = `
      span {
        padding: 5px;
        margin: 5px;
        background-color: gray;
        color: white;
      }
      
      .active {
        background-color: lightgreen;
        color: black;
      }      
    `;
    this.span = document.createElement('span');
    this.span.innerText = text;
    this.span.addEventListener('click', (event) => { 
      console.log('CUSTOM ELEMENT: Clicked inside custom element.'); 
      this.handleClick(event);
    });
    
    this.shadowRoot.append(style, this.span);
  }
  
  handleClick(event) {
    // If the event is initiated from the internal event listener,
    // the target will correspond to our span element, enabling us to toggle it.
    // If the event originates from outside the element, 
    // the target cannot be our span element, thus necessitating deactivation.
    if (event.target === this.span) {
      this.span.classList.toggle('active');
    }
    else {
      this.span.classList.remove('active');
    }
  }
}
customElements.define('my-span', MySpan, { extends: 'span' });

// Embedding an instance of the custom element
const div1 = document.querySelector('#target');
const mySpan = new MySpan();
div1.appendChild(mySpan);

// Adding an event listener to the page
function handleClick(event) {
  // If the click is not targeted at the custom element, notify it
  // about the event so that it can deactivate its span.
  if (event.target !== mySpan) {
    console.log(`PAGE: Clicked on ${ event.target }. Notifying custom element.`);
    mySpan.handleClick(event);
  }
}
document.body.addEventListener('click', (event) => handleClick(event));

p {
  padding: 5px;
  background-color: lightgray;
}

<p id="target">This is a paragraph.</p>
<p>This is a second paragraph.</p>
<p>This is a third paragraph.</p>
<p>This is a fourth paragraph.</p>

Answer 2

The click event's target property is set to the topmost event target.

The highest element in the rendering order capable of being an event target is designated as the topmost event target.

Due to the encapsulation of its internal structure by shadow DOM, the event is retargeted to the host element. In this scenario, the click event's target is redirected to the custom-drop-down since it is the initial and uppermost element able to be a target.

If there is a necessity to target an element within the custom element, various approaches can be adopted:

Incorporate an event listener inside the element itself.
Utilize the <slot> element to populate the custom element with elements specified in the light DOM.
Employ the composedPath on events bearing composed: true to ascertain the internal element from which the event originated through bubbling.

An illustrative example demonstrating the desired functionality is provided below. By clicking on the Custom Element, it switches between active and inactive states (akin to toggling a dropdown). Clicking elsewhere on the page deactivates the custom element (similar to concealing a dropdown upon losing focus).

// Defining the custom element type
class MySpan extends HTMLSpanElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    
    const text = 'Custom Element.';
    const style = document.createElement('style');
    style.textContent = `
      span {
        padding: 5px;
        margin: 5px;
        background-color: gray;
        color: white;
      }
      
      .active {
        background-color: lightgreen;
        color: black;
      }      
    `;
    this.span = document.createElement('span');
    this.span.innerText = text;
    this.span.addEventListener('click', (event) => { 
      console.log('CUSTOM ELEMENT: Clicked inside custom element.'); 
      this.handleClick(event);
    });
    
    this.shadowRoot.append(style, this.span);
  }
  
  handleClick(event) {
    // If the event is initiated from the internal event listener,
    // the target will correspond to our span element, enabling us to toggle it.
    // If the event originates from outside the element, 
    // the target cannot be our span element, thus necessitating deactivation.
    if (event.target === this.span) {
      this.span.classList.toggle('active');
    }
    else {
      this.span.classList.remove('active');
    }
  }
}
customElements.define('my-span', MySpan, { extends: 'span' });

// Embedding an instance of the custom element
const div1 = document.querySelector('#target');
const mySpan = new MySpan();
div1.appendChild(mySpan);

// Adding an event listener to the page
function handleClick(event) {
  // If the click is not targeted at the custom element, notify it
  // about the event so that it can deactivate its span.
  if (event.target !== mySpan) {
    console.log(`PAGE: Clicked on ${ event.target }. Notifying custom element.`);
    mySpan.handleClick(event);
  }
}
document.body.addEventListener('click', (event) => handleClick(event));

p {
  padding: 5px;
  background-color: lightgray;
}

<p id="target">This is a paragraph.</p>
<p>This is a second paragraph.</p>
<p>This is a third paragraph.</p>
<p>This is a fourth paragraph.</p>

Utilizing external clicks with Lit-Elements in your project

Answer №1

Similar questions

When using AngularJS in conjunction with Karma-Jasmine, it is important to note that the functions verifyNoOutstandingExpectation() and verifyNoOutstandingRequest() may not

When filling options within an optgroup in a selectbox, the data for each option may override one another

Utilizing Selenium to inject javascript permanently or on every page refresh

IE9 presents a frustrating issue where the jQuery select box value is returning as

Top method for verifying email existence in ASP.NET database

Despite attempts to exclude them, types in node_modules continue to be compiled in TypeScript

How to extract a particular value from a JSON object using AJAX?

Is it possible to maintain component data in Angular while also incorporating dynamic components?

Can javascript be used to swap out the folder in my URL?

Struggling to transfer information from JavaScript to Python Flask?

Sort the inner array within an outer array

Creating a task management system using HTML, CSS, and JavaScript that utilizes local

Using Angular's ngBlur directive on multiple input fields

What is the method for retrieving the active element with Waypoint?

What could be causing passport.authenticate to not be triggered?

Include the aria-labelledby attribute in the jQuery Datatable Pagination

What is the best way to establish a two-way connection between two arrays?

asp.net website fully compressed using GZip

Tips for implementing multiple selectors in YUI

Navigating to Protected Mobile Platform