@whitesev/domutils 1.4.7 → 1.5.0

package/dist/index.system.js

@@ -60,6 +60,30 @@ System.register('DOMUtils', [], (function (exports) {
                 isShow(element) {
                     return Boolean(element.getClientRects().length);
                 },
+                /**
+                 * 在CSP策略下设置innerHTML
+                 * @param $el 元素
+                 * @param text 文本
+                 */
+                setSafeHTML($el, text) {
+                    // 创建 TrustedHTML 策略（需 CSP 允许）
+                    try {
+                        $el.innerHTML = text;
+                    }
+                    catch (error) {
+                        // @ts-ignore
+                        if (globalThis.trustedTypes) {
+                            // @ts-ignore
+                            const policy = globalThis.trustedTypes.createPolicy("safe-innerHTML", {
+                                createHTML: (html) => html,
+                            });
+                            $el.innerHTML = policy.createHTML(text);
+                        }
+                        else {
+                            throw new Error("trustedTypes is not defined");
+                        }
+                    }
+                },
                 /**
                  * 用于显示元素并获取它的高度宽度等其它属性
                  * @param element
@@ -267,44 +291,45 @@ System.register('DOMUtils', [], (function (exports) {
                          * @param event
                          */
                         function domUtilsEventCallBack(event) {
-                            let eventTarget = listenerOption.isComposedPath
-                                ? event.composedPath()[0]
-                                : event.target;
                             if (selectorList.length) {
                                 /* 存在子元素选择器 */
+                                // 这时候的this和target都是子元素选择器的元素
+                                let eventTarget = listenerOption.isComposedPath
+                                    ? event.composedPath()[0]
+                                    : event.target;
                                 let totalParent = DOMUtilsCommonUtils.isWin(elementItem)
                                     ? DOMUtilsContext.windowApi.document.documentElement
                                     : elementItem;
-                                for (let index = 0; index < selectorList.length; index++) {
-                                    const selectorItem = selectorList[index];
+                                let findValue = selectorList.find((selectorItem) => {
+                                    // 判断目标元素是否匹配选择器
                                     if (eventTarget.matches(selectorItem)) {
                                         /* 当前目标可以被selector所匹配到 */
-                                        listenerCallBack.call(eventTarget, event, eventTarget);
-                                        checkOptionOnceToRemoveEventListener();
-                                        break;
+                                        return true;
                                     }
-                                    else {
-                                        /* 在上层与主元素之间寻找可以被selector所匹配到的 */
-                                        let $closestMatches = eventTarget.closest(selectorItem);
-                                        if ($closestMatches && totalParent.contains($closestMatches)) {
-                                            /* event的target值不能直接修改 */
-                                            // 这里尝试使用defineProperty修改event的target值
-                                            try {
-                                                OriginPrototype.Object.defineProperty(event, "target", {
-                                                    get() {
-                                                        return $closestMatches;
-                                                    },
-                                                });
-                                            }
-                                            catch (error) { }
-                                            listenerCallBack.call($closestMatches, event, $closestMatches);
-                                            checkOptionOnceToRemoveEventListener();
-                                            break;
-                                        }
+                                    /* 在上层与主元素之间寻找可以被selector所匹配到的 */
+                                    let $closestMatches = eventTarget.closest(selectorItem);
+                                    if ($closestMatches && totalParent.contains($closestMatches)) {
+                                        eventTarget = $closestMatches;
+                                        return true;
                                     }
+                                    return false;
+                                });
+                                if (findValue) {
+                                    // 这里尝试使用defineProperty修改event的target值
+                                    try {
+                                        OriginPrototype.Object.defineProperty(event, "target", {
+                                            get() {
+                                                return eventTarget;
+                                            },
+                                        });
+                                    }
+                                    catch (error) { }
+                                    listenerCallBack.call(eventTarget, event, eventTarget);
+                                    checkOptionOnceToRemoveEventListener();
                                 }
                             }
                             else {
+                                // 这时候的this指向监听的元素
                                 listenerCallBack.call(elementItem, event);
                                 checkOptionOnceToRemoveEventListener();
                             }
@@ -1037,7 +1062,7 @@ System.register('DOMUtils', [], (function (exports) {
                     super(option);
                 }
                 /** 版本号 */
-                version = "2024.12.4";
+                version = "2025.3.2";
                 attr(element, attrName, attrValue) {
                     let DOMUtilsContext = this;
                     if (typeof element === "string") {
@@ -1094,7 +1119,7 @@ System.register('DOMUtils', [], (function (exports) {
                     let DOMUtilsContext = this;
                     let tempElement = DOMUtilsContext.windowApi.document.createElement(tagName);
                     if (typeof property === "string") {
-                        tempElement.innerHTML = property;
+                        DOMUtilsContext.html(tempElement, property);
                         return tempElement;
                     }
                     if (property == null) {
@@ -1105,6 +1130,10 @@ System.register('DOMUtils', [], (function (exports) {
                     }
                     Object.keys(property).forEach((key) => {
                         let value = property[key];
+                        if (key === "innerHTML") {
+                            DOMUtilsContext.html(tempElement, value);
+                            return;
+                        }
                         tempElement[key] = value;
                     });
                     Object.keys(attributes).forEach((key) => {
@@ -1273,7 +1302,7 @@ System.register('DOMUtils', [], (function (exports) {
                             html = html.innerHTML;
                         }
                         if ("innerHTML" in element) {
-                            element.innerHTML = html;
+                            DOMUtilsCommonUtils.setSafeHTML(element, html);
                         }
                     }
                 }
@@ -1379,7 +1408,12 @@ System.register('DOMUtils', [], (function (exports) {
                         return Reflect.get(element, propName);
                     }
                     else {
-                        Reflect.set(element, propName, propValue);
+                        if (element instanceof Element && propName === "innerHTML") {
+                            DOMUtilsContext.html(element, propValue);
+                        }
+                        else {
+                            Reflect.set(element, propName, propValue);
+                        }
                     }
                 }
                 /**
@@ -1777,7 +1811,7 @@ System.register('DOMUtils', [], (function (exports) {
                         });
                         return;
                     }
-                    element.innerHTML = "";
+                    DOMUtilsContext.html(element, "");
                 }
                 /**
                  * 获取元素相对于文档的偏移坐标（加上文档的滚动条）
@@ -1987,10 +2021,10 @@ System.register('DOMUtils', [], (function (exports) {
                     if (typeof duration !== "number" || duration <= 0) {
                         throw new TypeError("duration must be a positive number");
                     }
-                    if (typeof callback !== "function" && callback !== void 0) {
+                    if (typeof callback !== "function" && callback !== undefined) {
                         throw new TypeError("callback must be a function or null");
                     }
-                    if (typeof styles !== "object" || styles === void 0) {
+                    if (typeof styles !== "object" || styles === undefined) {
                         throw new TypeError("styles must be an object");
                     }
                     if (Object.keys(styles).length === 0) {
@@ -2049,7 +2083,7 @@ System.register('DOMUtils', [], (function (exports) {
                     element = element;
                     // 创建一个新的div元素，并将wrapperHTML作为其innerHTML
                     let wrapper = DOMUtilsContext.windowApi.document.createElement("div");
-                    wrapper.innerHTML = wrapperHTML;
+                    DOMUtilsContext.html(wrapper, wrapperHTML);
                     let wrapperFirstChild = wrapper.firstChild;
                     // 将要包裹的元素插入目标元素前面
                     let parentElement = element.parentElement;
@@ -2145,7 +2179,7 @@ System.register('DOMUtils', [], (function (exports) {
                     }
                     function parseHTMLByCreateDom() {
                         let tempDIV = DOMUtilsContext.windowApi.document.createElement("div");
-                        tempDIV.innerHTML = html;
+                        DOMUtilsContext.html(tempDIV, html);
                         if (isComplete) {
                             return tempDIV;
                         }