Query - Content

$('input').value();

$('input').val(newValue)

$('input').val(); // identical;

// Get the value of an input
const inputValue = $('input').val();
console.log(inputValue);

// Set the value of an input
$('input').val('New value');

$('p').text()

$('p').text(newText)

// Get the text of an element
const buttonText = $('button').text();
console.log(buttonText);

// Set the text of an element
$('button').text('Click me!');

$('.container').html()

$('.container').html(newHtml)

// Get the HTML content
const containerHtml = $('.container').html();
console.log(containerHtml);

// Set the HTML content
$('.container').html('<p>New content</p>');

$('.element').outerHTML()

$('.element').outerHTML(newHtml)

// Get the outer HTML
const elementOuterHtml = $('.element').outerHTML();
console.log(elementOuterHtml);

// Set the outer HTML
$('.element').outerHTML('<div class="new-element">Replaced content</div>');

$('p').textNode()

// Get only the immediate text content, ignoring nested elements
const immediateText = $('p').textNode();
console.log(immediateText);

// From a component (default slot)
$(webComponent).getSlot()

// From a slot element
$(slot).getSlot()

$(webComponent).getSlot(slotName)

// Get all slotted content from a web component's default slot
const myComponent = document.createElement('my-component');
// ... add some slotted content ...
const allSlottedContent = $(myComponent).getSlot();

// Get content for just the "header" slot
const headerContent = $(myComponent).getSlot('header');

// Get the content of a slot element
const slotContent = $(element.shadowRoot).find('slot[name="header"]').getSlot();

$(webComponent).setSlot(content)

$(webComponent).setSlot(slotName, content)

// Set content for the default (unnamed) slot
$(myComponent).setSlot('<p>Default content</p>');

// Set content for a named slot
$(myComponent).setSlot('header', '<h1>Header content</h1>');

// Set content for a slot element (adds to parent component)
$(element.shadowRoot).find('slot').setSlot('<div>New content</div>');

class MyComponent extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <div>
        <slot name="header">Default Header</slot>
        <slot>Default Content</slot>
      </div>
    `;
  }

  // Helper to set default content if none provided
  setDefaultSlot(slotName, content) {
    // Check if slot is empty
    if (slotName) {
      if (!this.querySelector(`[slot="${slotName}"]`)) {
        $(this).setSlot(slotName, content);
      }
    } else {
      if (!this.querySelector(':not([slot])')) {
        $(this).setSlot(content);
      }
    }
  }
}

customElements.define('my-component', MyComponent);

// Usage
const component = document.createElement('my-component');
document.body.appendChild(component);

// Set header slot content
$(component).setSlot('header', '<h1>My Header</h1>');

// Set default slot content
$(component).setSlot('<p>Main content</p>');

// Get all slotted content
console.log($(component).getSlot());