@ionic/core 8.8.17 → 8.8.18-dev.11786108988.1fd94742

package/dist/collection/components/checkbox/checkbox.js

@@ -19,101 +19,104 @@ import { getIonMode } from "../../global/ionic-global";
  * @part error-text - Supporting text displayed beneath the checkbox label when the checkbox is invalid and touched.
  */
 export class Checkbox {
-    constructor() {
-        this.inputId = `ion-cb-${checkboxIds++}`;
-        this.inputLabelId = `${this.inputId}-lbl`;
-        this.helperTextId = `${this.inputId}-helper-text`;
-        this.errorTextId = `${this.inputId}-error-text`;
-        this.inheritedAttributes = {};
-        /**
-         * The name of the control, which is submitted with the form data.
-         */
-        this.name = this.inputId;
-        /**
-         * If `true`, the checkbox is selected.
-         */
-        this.checked = false;
-        /**
-         * If `true`, the checkbox will visually appear as indeterminate.
-         */
-        this.indeterminate = false;
-        /**
-         * If `true`, the user cannot interact with the checkbox.
-         */
-        this.disabled = false;
-        /**
-         * The value of the checkbox does not mean if it's checked or not, use the `checked`
-         * property for that.
-         *
-         * The value of a checkbox is analogous to the value of an `<input type="checkbox">`,
-         * it's only used when the checkbox participates in a native `<form>`.
-         */
-        this.value = 'on';
-        /**
-         * Where to place the label relative to the checkbox.
-         * `"start"`: The label will appear to the left of the checkbox in LTR and to the right in RTL.
-         * `"end"`: The label will appear to the right of the checkbox in LTR and to the left in RTL.
-         * `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
-         * `"stacked"`: The label will appear above the checkbox regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
-         */
-        this.labelPlacement = 'start';
-        /**
-         * If true, screen readers will announce it as a required field. This property
-         * works only for accessibility purposes, it will not prevent the form from
-         * submitting if the value is invalid.
-         */
-        this.required = false;
-        /**
-         * Track validation state for proper aria-live announcements.
-         */
-        this.isInvalid = false;
-        this.hasLabelContent = false;
-        /**
-         * Sets the checked property and emits
-         * the ionChange event. Use this to update the
-         * checked state in response to user-generated
-         * actions such as a click.
-         */
-        this.setChecked = (state) => {
-            const isChecked = (this.checked = state);
-            this.ionChange.emit({
-                checked: isChecked,
-                value: this.value,
-            });
-        };
-        this.toggleChecked = (ev) => {
-            ev.preventDefault();
-            this.setChecked(!this.checked);
-            this.indeterminate = false;
-        };
-        this.onFocus = () => {
-            this.ionFocus.emit();
-        };
-        this.onBlur = () => {
-            this.ionBlur.emit();
-        };
-        this.onKeyDown = (ev) => {
-            if (ev.key === ' ') {
-                ev.preventDefault();
-                if (!this.disabled) {
-                    this.toggleChecked(ev);
-                }
-            }
-        };
-        this.onClick = (ev) => {
-            if (this.disabled) {
-                return;
-            }
-            this.toggleChecked(ev);
-        };
-        /**
-         * Stops propagation when the display label is clicked,
-         * otherwise, two clicks will be triggered.
-         */
-        this.onDivLabelClick = (ev) => {
-            ev.stopPropagation();
-        };
-    }
+    inputId = `ion-cb-${checkboxIds++}`;
+    inputLabelId = `${this.inputId}-lbl`;
+    helperTextId = `${this.inputId}-helper-text`;
+    errorTextId = `${this.inputId}-error-text`;
+    inheritedAttributes = {};
+    validationObserver;
+    itemFocusObserver;
+    el;
+    /**
+     * The color to use from your application's color palette.
+     * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+     * For more information on colors, see [theming](/docs/theming/basics).
+     */
+    color;
+    /**
+     * The name of the control, which is submitted with the form data.
+     */
+    name = this.inputId;
+    /**
+     * If `true`, the checkbox is selected.
+     */
+    checked = false;
+    /**
+     * If `true`, the checkbox will visually appear as indeterminate.
+     */
+    indeterminate = false;
+    /**
+     * If `true`, the user cannot interact with the checkbox.
+     */
+    disabled = false;
+    /**
+     * Text that is placed under the checkbox label and displayed when an error is detected.
+     */
+    errorText;
+    /**
+     * Text that is placed under the checkbox label and displayed when no error is detected.
+     */
+    helperText;
+    /**
+     * The value of the checkbox does not mean if it's checked or not, use the `checked`
+     * property for that.
+     *
+     * The value of a checkbox is analogous to the value of an `<input type="checkbox">`,
+     * it's only used when the checkbox participates in a native `<form>`.
+     */
+    value = 'on';
+    /**
+     * Where to place the label relative to the checkbox.
+     * `"start"`: The label will appear to the left of the checkbox in LTR and to the right in RTL.
+     * `"end"`: The label will appear to the right of the checkbox in LTR and to the left in RTL.
+     * `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+     * `"stacked"`: The label will appear above the checkbox regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
+     */
+    labelPlacement = 'start';
+    /**
+     * How to pack the label and checkbox within a line.
+     * `"start"`: The label and checkbox will appear on the left in LTR and
+     * on the right in RTL.
+     * `"end"`: The label and checkbox will appear on the right in LTR and
+     * on the left in RTL.
+     * `"space-between"`: The label and checkbox will appear on opposite
+     * ends of the line with space between the two elements.
+     * Setting this property will change the checkbox `display` to `block`.
+     */
+    justify;
+    /**
+     * How to control the alignment of the checkbox and label on the cross axis.
+     * `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL.
+     * `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
+     * Setting this property will change the checkbox `display` to `block`.
+     */
+    alignment;
+    /**
+     * If true, screen readers will announce it as a required field. This property
+     * works only for accessibility purposes, it will not prevent the form from
+     * submitting if the value is invalid.
+     */
+    required = false;
+    /**
+     * Track validation state for proper aria-live announcements.
+     */
+    isInvalid = false;
+    hasLabelContent = false;
+    hintTextId;
+    /**
+     * Emitted when the checked property has changed as a result of a user action such as a click.
+     *
+     * This event will not emit when programmatically setting the `checked` property.
+     */
+    ionChange;
+    /**
+     * Emitted when the checkbox has focus.
+     */
+    ionFocus;
+    /**
+     * Emitted when the checkbox loses focus.
+     */
+    ionBlur;
     connectedCallback() {
         const { el } = this;
         if (Build.isBrowser && typeof MutationObserver !== 'undefined') {
@@ -165,7 +168,9 @@ export class Checkbox {
         this.itemFocusObserver = createItemMultipleInputsObserver(el, () => forceUpdate(this));
     }
     componentWillLoad() {
-        this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
+        this.inheritedAttributes = {
+            ...inheritAriaAttributes(this.el),
+        };
         this.hintTextId = this.getHintTextId();
     }
     disconnectedCallback() {
@@ -182,6 +187,51 @@ export class Checkbox {
     async setFocus() {
         this.el.focus();
     }
+    /**
+     * Sets the checked property and emits
+     * the ionChange event. Use this to update the
+     * checked state in response to user-generated
+     * actions such as a click.
+     */
+    setChecked = (state) => {
+        const isChecked = (this.checked = state);
+        this.ionChange.emit({
+            checked: isChecked,
+            value: this.value,
+        });
+    };
+    toggleChecked = (ev) => {
+        ev.preventDefault();
+        this.setChecked(!this.checked);
+        this.indeterminate = false;
+    };
+    onFocus = () => {
+        this.ionFocus.emit();
+    };
+    onBlur = () => {
+        this.ionBlur.emit();
+    };
+    onKeyDown = (ev) => {
+        if (ev.key === ' ') {
+            ev.preventDefault();
+            if (!this.disabled) {
+                this.toggleChecked(ev);
+            }
+        }
+    };
+    onClick = (ev) => {
+        if (this.disabled) {
+            return;
+        }
+        this.toggleChecked(ev);
+    };
+    /**
+     * Stops propagation when the display label is clicked,
+     * otherwise, two clicks will be triggered.
+     */
+    onDivLabelClick = (ev) => {
+        ev.stopPropagation();
+    };
     getHintTextId() {
         const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
         if (isInvalid && errorText) {
@@ -230,7 +280,7 @@ export class Checkbox {
                 [`checkbox-justify-${justify}`]: justify !== undefined,
                 [`checkbox-alignment-${alignment}`]: alignment !== undefined,
                 [`checkbox-label-placement-${labelPlacement}`]: true,
-            }) }, h("label", { key: 'acca2f5b0a37aa70930b2f74ff4857939b2be2b0', class: "checkbox-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: 'f46e409383e9d3ffc3daae8e7cd4159427d4c8fe', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, required: required }, inheritedAttributes)), h("div", { key: '69d8bf21c781cd9b1f56ceae40ff7911e6f5adfe', class: {
+            }) }, h("label", { key: 'acca2f5b0a37aa70930b2f74ff4857939b2be2b0', class: "checkbox-wrapper", htmlFor: inputId }, h("input", { key: 'f46e409383e9d3ffc3daae8e7cd4159427d4c8fe', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, required: required, ...inheritedAttributes }), h("div", { key: '69d8bf21c781cd9b1f56ceae40ff7911e6f5adfe', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !this.hasLabelContent,
             }, part: "label", id: this.inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: '3c444ab897456c522588fc6cee616030f16b0586' }), this.renderHintText()), h("div", { key: '0a18dfe7a68a8eec08ce8764bd2c8a59c4a38802', class: "native-wrapper" }, h("svg", { key: '56b298b54ebc88a429a9dd67b8dabd7063759b3a', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container", "aria-hidden": "true" }, path)))));

package/dist/collection/components/chip/chip.js

@@ -8,16 +8,20 @@ import { getIonMode } from "../../global/ionic-global";
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 export class Chip {
-    constructor() {
-        /**
-         * Display an outline style button.
-         */
-        this.outline = false;
-        /**
-         * If `true`, the user cannot interact with the chip.
-         */
-        this.disabled = false;
-    }
+    /**
+     * The color to use from your application's color palette.
+     * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+     * For more information on colors, see [theming](/docs/theming/basics).
+     */
+    color;
+    /**
+     * Display an outline style button.
+     */
+    outline = false;
+    /**
+     * If `true`, the user cannot interact with the chip.
+     */
+    disabled = false;
     render() {
         const mode = getIonMode(this);
         return (h(Host, { key: 'fa2e9a4837ef87a17ef10f388e8caa7f604d9145', "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {

package/dist/collection/components/col/col.js

@@ -5,10 +5,129 @@ import { Host, forceUpdate, h } from "@stencil/core";
 import { matchBreakpoint } from "../../utils/media";
 import { getIonMode } from "../../global/ionic-global";
 const win = typeof window !== 'undefined' ? window : undefined;
-// eslint-disable-next-line @typescript-eslint/prefer-optional-chain
 const SUPPORTS_VARS = win && !!(win.CSS && win.CSS.supports && win.CSS.supports('--a: 0'));
 const BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];
 export class Col {
+    /**
+     * The amount to offset the column, in terms of how many columns it should shift to the end
+     * of the total available.
+     */
+    offset;
+    /**
+     * The amount to offset the column for xs screens, in terms of how many columns it should shift
+     * to the end of the total available.
+     */
+    offsetXs;
+    /**
+     * The amount to offset the column for sm screens, in terms of how many columns it should shift
+     * to the end of the total available.
+     */
+    offsetSm;
+    /**
+     * The amount to offset the column for md screens, in terms of how many columns it should shift
+     * to the end of the total available.
+     */
+    offsetMd;
+    /**
+     * The amount to offset the column for lg screens, in terms of how many columns it should shift
+     * to the end of the total available.
+     */
+    offsetLg;
+    /**
+     * The amount to offset the column for xl screens, in terms of how many columns it should shift
+     * to the end of the total available.
+     */
+    offsetXl;
+    /**
+     * The amount to pull the column, in terms of how many columns it should shift to the start of
+     * the total available.
+     */
+    pull;
+    /**
+     * The amount to pull the column for xs screens, in terms of how many columns it should shift
+     * to the start of the total available.
+     */
+    pullXs;
+    /**
+     * The amount to pull the column for sm screens, in terms of how many columns it should shift
+     * to the start of the total available.
+     */
+    pullSm;
+    /**
+     * The amount to pull the column for md screens, in terms of how many columns it should shift
+     * to the start of the total available.
+     */
+    pullMd;
+    /**
+     * The amount to pull the column for lg screens, in terms of how many columns it should shift
+     * to the start of the total available.
+     */
+    pullLg;
+    /**
+     * The amount to pull the column for xl screens, in terms of how many columns it should shift
+     * to the start of the total available.
+     */
+    pullXl;
+    /**
+     * The amount to push the column, in terms of how many columns it should shift to the end
+     * of the total available.
+     */
+    push;
+    /**
+     * The amount to push the column for xs screens, in terms of how many columns it should shift
+     * to the end of the total available.
+     */
+    pushXs;
+    /**
+     * The amount to push the column for sm screens, in terms of how many columns it should shift
+     * to the end of the total available.
+     */
+    pushSm;
+    /**
+     * The amount to push the column for md screens, in terms of how many columns it should shift
+     * to the end of the total available.
+     */
+    pushMd;
+    /**
+     * The amount to push the column for lg screens, in terms of how many columns it should shift
+     * to the end of the total available.
+     */
+    pushLg;
+    /**
+     * The amount to push the column for xl screens, in terms of how many columns it should shift
+     * to the end of the total available.
+     */
+    pushXl;
+    /**
+     * The size of the column, in terms of how many columns it should take up out of the total
+     * available. If `"auto"` is passed, the column will be the size of its content.
+     */
+    size;
+    /**
+     * The size of the column for xs screens, in terms of how many columns it should take up out
+     * of the total available. If `"auto"` is passed, the column will be the size of its content.
+     */
+    sizeXs;
+    /**
+     * The size of the column for sm screens, in terms of how many columns it should take up out
+     * of the total available. If `"auto"` is passed, the column will be the size of its content.
+     */
+    sizeSm;
+    /**
+     * The size of the column for md screens, in terms of how many columns it should take up out
+     * of the total available. If `"auto"` is passed, the column will be the size of its content.
+     */
+    sizeMd;
+    /**
+     * The size of the column for lg screens, in terms of how many columns it should take up out
+     * of the total available. If `"auto"` is passed, the column will be the size of its content.
+     */
+    sizeLg;
+    /**
+     * The size of the column for xl screens, in terms of how many columns it should take up out
+     * of the total available. If `"auto"` is passed, the column will be the size of its content.
+     */
+    sizeXl;
     onResize() {
         forceUpdate(this);
     }
@@ -85,9 +204,14 @@ export class Col {
     render() {
         const isRTL = document.dir === 'rtl';
         const mode = getIonMode(this);
-        return (h(Host, { key: '32ed75d81dd09d9bc8999f6d42e5b3cb99c84d91', class: {
+        return (h(Host, { key: 'e12293a4315cb474bbde73421dd0b4129f1df1cc', class: {
                 [mode]: true,
-            }, style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, h("slot", { key: '38f8d0440c20cc6d1b1d6a654d07f16de61d8134' })));
+            }, style: {
+                ...this.calculateOffset(isRTL),
+                ...this.calculatePull(isRTL),
+                ...this.calculatePush(isRTL),
+                ...this.calculateSize(),
+            } }, h("slot", { key: '869317ea6574111a57a7a9d096c53d264c335d28' })));
     }
     static get is() { return "ion-col"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/content/content.js

@@ -15,66 +15,95 @@ import { getIonMode } from "../../global/ionic-global";
  * @part scroll - The scrollable container of the content.
  */
 export class Content {
-    constructor() {
-        this.watchDog = null;
-        this.isScrolling = false;
-        this.lastScroll = 0;
-        this.queued = false;
-        this.cTop = -1;
-        this.cBottom = -1;
-        this.isMainContent = true;
-        this.resizeTimeout = null;
-        this.inheritedAttributes = {};
-        this.tabsElement = null;
-        // Detail is used in a hot loop in the scroll event, by allocating it here
-        // V8 will be able to inline any read/write to it since it's a monomorphic class.
-        // https://mrale.ph/blog/2015/01/11/whats-up-with-monomorphism.html
-        this.detail = {
-            scrollTop: 0,
-            scrollLeft: 0,
-            type: 'scroll',
-            event: undefined,
-            startX: 0,
-            startY: 0,
-            startTime: 0,
-            currentX: 0,
-            currentY: 0,
-            velocityX: 0,
-            velocityY: 0,
-            deltaX: 0,
-            deltaY: 0,
-            currentTime: 0,
-            data: undefined,
-            isScrolling: true,
-        };
-        /**
-         * If `true`, the content will scroll behind the headers
-         * and footers. This effect can easily be seen by setting the toolbar
-         * to transparent.
-         */
-        this.fullscreen = false;
-        /**
-         * Controls where the fixed content is placed relative to the main content
-         * in the DOM. This can be used to control the order in which fixed elements
-         * receive keyboard focus.
-         * For example, if a FAB in the fixed slot should receive keyboard focus before
-         * the main page content, set this property to `'before'`.
-         */
-        this.fixedSlotPlacement = 'after';
-        /**
-         * If you want to enable the content scrolling in the X axis, set this property to `true`.
-         */
-        this.scrollX = false;
-        /**
-         * If you want to disable the content scrolling in the Y axis, set this property to `false`.
-         */
-        this.scrollY = true;
-        /**
-         * Because of performance reasons, ionScroll events are disabled by default, in order to enable them
-         * and start listening from (ionScroll), set this property to `true`.
-         */
-        this.scrollEvents = false;
-    }
+    watchDog = null;
+    isScrolling = false;
+    lastScroll = 0;
+    queued = false;
+    cTop = -1;
+    cBottom = -1;
+    scrollEl;
+    backgroundContentEl;
+    isMainContent = true;
+    resizeTimeout = null;
+    inheritedAttributes = {};
+    tabsElement = null;
+    tabsLoadCallback;
+    // Detail is used in a hot loop in the scroll event, by allocating it here
+    // V8 will be able to inline any read/write to it since it's a monomorphic class.
+    // https://mrale.ph/blog/2015/01/11/whats-up-with-monomorphism.html
+    detail = {
+        scrollTop: 0,
+        scrollLeft: 0,
+        type: 'scroll',
+        event: undefined,
+        startX: 0,
+        startY: 0,
+        startTime: 0,
+        currentX: 0,
+        currentY: 0,
+        velocityX: 0,
+        velocityY: 0,
+        deltaX: 0,
+        deltaY: 0,
+        currentTime: 0,
+        data: undefined,
+        isScrolling: true,
+    };
+    el;
+    /**
+     * The color to use from your application's color palette.
+     * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+     * For more information on colors, see [theming](/docs/theming/basics).
+     */
+    color;
+    /**
+     * If `true`, the content will scroll behind the headers
+     * and footers. This effect can easily be seen by setting the toolbar
+     * to transparent.
+     */
+    fullscreen = false;
+    /**
+     * Controls where the fixed content is placed relative to the main content
+     * in the DOM. This can be used to control the order in which fixed elements
+     * receive keyboard focus.
+     * For example, if a FAB in the fixed slot should receive keyboard focus before
+     * the main page content, set this property to `'before'`.
+     */
+    fixedSlotPlacement = 'after';
+    /**
+     * If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce.
+     * If the content exceeds the bounds of ionContent, nothing will change.
+     * Note, this does not disable the system bounce on iOS. That is an OS level setting.
+     */
+    forceOverscroll;
+    /**
+     * If you want to enable the content scrolling in the X axis, set this property to `true`.
+     */
+    scrollX = false;
+    /**
+     * If you want to disable the content scrolling in the Y axis, set this property to `false`.
+     */
+    scrollY = true;
+    /**
+     * Because of performance reasons, ionScroll events are disabled by default, in order to enable them
+     * and start listening from (ionScroll), set this property to `true`.
+     */
+    scrollEvents = false;
+    /**
+     * Emitted when the scroll has started. This event is disabled by default.
+     * Set `scrollEvents` to `true` to enable.
+     */
+    ionScrollStart;
+    /**
+     * Emitted while scrolling. This event is disabled by default.
+     * Set `scrollEvents` to `true` to enable.
+     */
+    ionScroll;
+    /**
+     * Emitted when the scroll has ended. This event is disabled by default.
+     * Set `scrollEvents` to `true` to enable.
+     */
+    ionScrollEnd;
     componentWillLoad() {
         this.inheritedAttributes = inheritAriaAttributes(this.el);
     }
@@ -373,7 +402,7 @@ export class Content {
         const forceOverscroll = this.shouldForceOverscroll();
         const transitionShadow = mode === 'ios';
         this.resize();
-        return (h(Host, Object.assign({ key: '8c1bc4a4df8698d3884741eb38512dc059210c50', role: isMainContent ? 'main' : undefined, class: createColorClasses(this.color, {
+        return (h(Host, { key: '8c1bc4a4df8698d3884741eb38512dc059210c50', role: isMainContent ? 'main' : undefined, class: createColorClasses(this.color, {
                 [mode]: true,
                 'content-fullscreen': this.fullscreen,
                 'content-sizing': hostContext('ion-popover', this.el),
@@ -382,7 +411,7 @@ export class Content {
             }), style: {
                 '--offset-top': `${this.cTop}px`,
                 '--offset-bottom': `${this.cBottom}px`,
-            } }, inheritedAttributes), h("div", { key: '5e7412549b51ef7543d9378ecab9aac6bc461588', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? h("slot", { name: "fixed" }) : null, h("div", { key: '33f6fbf7e1e027c7cbd2dda95b487f18dc648cef', class: {
+            }, ...inheritedAttributes }, h("div", { key: '5e7412549b51ef7543d9378ecab9aac6bc461588', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? h("slot", { name: "fixed" }) : null, h("div", { key: '33f6fbf7e1e027c7cbd2dda95b487f18dc648cef', class: {
                 'inner-scroll': true,
                 'scroll-x': scrollX,
                 'scroll-y': scrollY,
@@ -824,12 +853,11 @@ export class Content {
     }
 }
 const getParentElement = (el) => {
-    var _a;
     if (el.parentElement) {
         // normal element with a parent element
         return el.parentElement;
     }
-    if ((_a = el.parentNode) === null || _a === void 0 ? void 0 : _a.host) {
+    if (el.parentNode?.host) {
         // shadow dom's document fragment
         return el.parentNode.host;
     }