Query - Setup Module exports and environment configuration for Query package API Reference
Categories

Query - Setup

Query exports several functions for DOM querying and environment configuration.

Query Functions

$

import { $ } from '@semantic-ui/query';

Creates a Query collection from a selector, element, or HTML string. Queries within the light DOM only.

const $buttons = $('button');
const $newDiv = $('<div class="card">Content</div>');
const $element = $(document.body);

$$

import { $$ } from '@semantic-ui/query';

Creates a Query collection that pierces shadow DOM boundaries. Use this to query inside web components.

const $shadowContent = $$('my-component .inner-content');

When to use $$ Use $$ when you need to find elements inside shadow roots. For regular DOM queries, prefer $ for better performance.

Global Configuration

exportGlobals

function exportGlobals(options)

Attaches $, $$, and Query to the global scope for use without imports.

Parameters

NameTypeDescription
optionsobjectWhich functions to export

Options

NameTypeDefaultDescription
$booleantrueExport $ to global scope
$$booleantrueExport $$ to global scope
QuerybooleantrueExport Query constructor to global scope

Example

import { exportGlobals } from '@semantic-ui/query';


exportGlobals();


// Now available globally
$('div').addClass('ready');
$$('ui-modal .content').text('Hello');

restoreGlobals

function restoreGlobals()

Restores the original values of $ and $$ that existed before exportGlobals() was called.

Returns

The Query $ function (for assignment to a custom variable).

Example

import { exportGlobals, restoreGlobals } from '@semantic-ui/query';


exportGlobals();


// Use Query globally
$('div').addClass('processed');


// Restore original $ (e.g., jQuery)
const $q = restoreGlobals();


// Continue using Query via alias
$q('div').removeClass('processed');

useAlias

function useAlias()

Returns the $ function for assignment to a custom variable. Use this to avoid conflicts with other libraries without touching global scope.

Returns

The Query $ function.

Example

import { useAlias } from '@semantic-ui/query';


const $q = useAlias();


$q('div').addClass('selected');
$q('.modal').css('display', 'block');

Import Patterns

ES Modules

import { $ } from '@semantic-ui/query';


const $paragraphs = $('p');
import { $, $$, useAlias } from '@semantic-ui/query';


const $domElements = $('div');
const $shadowElements = $$('my-component .shadow-content');
const $q = useAlias();

CommonJS

const { $ } = require('@semantic-ui/query');


const $paragraphs = $('p');

CDN / Browser

<script type="module">
  import { $, $$ } from 'https://unpkg.com/@semantic-ui/query';


  $('div').addClass('loaded');
</script>

With global export:

import { exportGlobals } from '@semantic-ui/query';


exportGlobals();


$('div').addClass('global-access');
$$('my-component').css('color', 'red');
Previous
Query
Next
Constructor