import { defineComponent as s, ref as r, watch as h, onMounted as f, createVNode as S, render as m } from "vue";
const v = {
  innerHTML: {
    type: String,
    default: ""
  },
  cssSheet: {
    type: String,
    default: ""
  }
}, p = "G", t = /* @__PURE__ */ s({
  name: `${p}ShadowDom`,
  props: v,
  setup(e, {
    slots: a
  }) {
    const l = r(), o = r(), n = r(), d = () => {
      var c;
      n.value && (e.innerHTML ? n.value.innerHTML = e.innerHTML : (n.value.innerHTML = "", a.default && a.default().forEach((i) => {
        const u = document.createElement("div");
        m(i, u), n.value.appendChild(u.children[0]);
      })), (c = o.value) == null || c.replaceSync(e.cssSheet), n.value.adoptedStyleSheets = [o.value]);
    };
    return h([() => e.innerHTML, () => e.cssSheet], d), f(() => {
      o.value = new CSSStyleSheet(), l.value && o.value && (n.value = l.value.attachShadow({
        mode: "open"
      }), d());
    }), () => S("div", {
      ref: l
    }, null);
  }
});
t.install = function(e, a) {
  e.component(a || t.name, t);
};
const M = {
  title: "Shadow DOM",
  category: "布局",
  status: "100%",
  install(e) {
    e.component(t.name, t);
  }
};
export {
  t as ShadowDom,
  M as default
};
