# # Component Selector

UIExtension provides a css-selector like syntax to make easier to search components. It's usually used to configure the `target` property of fragments and component search.

## # Syntax

selector name | example | description
--- | --- | ---
name selector | `'componentName', 'component_name','component-name', 'component-name1', '1component'` | component name selectors can only include single-letter, number, underscore or minus character
type selector | `'@div','@dropdown-menu', '@print:print-dialog'` | component type means the tag name defined in layout template, a type selector should start with `@` character and single-letter, number, underscore or minus. some time including the component module name sparated with colon character.
star selector | `'*'` | Selects all components
children selector | `'selector1>selector2'` | Selects all components which match `selector2` where the parent is `selector1`
descendants | `'selector1 selector2'` | Selects all `selector2` components inside `selector1`
attribute selector | `[attr=value]` | Selects all components with property or attribute name of `attr` whose value equals to `value`
attribute selector | `[attr^=value]` | Selects all components with property or attribute name of `attr` whose value begins with `value`
attribute selector | `[attr$=value]` | Selects all components with property or attribute name of `attr` whose value ends with `value`
attribute selector | `[attr*=value]` | Selects all components with property or attribute name of `attr` whose value contains with `value`
attribute selector | `[attr!=value]` | Selects all components with property or attribute name of `attr` whose value not equals to `value`
method selector | `selector1::childAt(index)` | Selects all components that are all the child at `index` of their parents selected by `selector1`
method selector | `selector1::parent()` | Selects all components that are all the parent component of their children selected by `selector1`
method selector | `selector1::allAfter()` | Selects all components of the same level that after the component set selected by `selector1`
method selector | `selector1::allBefore()` | Selects all components of the same level that before the component set selected by `selector1`
index-related selector | `selector1::eq(index)` | Selects the component by index value in components set selected by `selector1`
index-related selector | `selector1::last()` | Selects the last one component of the components set selected by `selector1`
index-related selector | `selector1::first()` | Selects the first one component of the components set selected by `selector1`, It's equivalent to `selector1:eq(0)`

## # Examples

    <html>
    </html>
    <script>
        UIExtension.PDFUI.module('custom',[])
            .controller('customController', {
                handle: function() {
                    const root = this.component.getRoot();
                    const contextmenuItems = root.querySelectorAll('fv--page-contextmenu>@contextmenu-item');
                    contextmenuItems.forEach(function(contextmenu) {
                        contextmenu.element.style.cssText += 'color: red';
                    })
                }
            })
        var CustomRibbonAppearance = UIExtension.appearances.RibbonAppearance.extend({
            getDefaultFragments() {
                // remove the export comment dropdown menu!
                return [{
                    target: 'home-tab-group-hand::childAt(0)',
                    action: 'after',
                    template: `<xbutton class="fv__ui-toolbar-show-text-button">Click me!</xbutton>`
                },{
                    target: 'commentlist-export-comment::parent()',
                    action: 'remove'
                }];
            }
        });

        var libPath = window.top.location.origin + '/lib';
        var pdfui = new UIExtension.PDFUI({
                viewerOptions: {
                    libPath: libPath,
                    jr: {
                        licenseSN: licenseSN,
                        licenseKey: licenseKey
                    }
                },
                renderTo: document.body,
                appearance: CustomRibbonAppearance,
                addons: []
        });
    </script>

    {
        "iframeOptions": {
            "style": "height: 500px"
        }
    }