vue3源码阅读【runtime-dom\src\index.ts】【normalizeContainer】

很简单的人

已于 2022-07-27 16:36:28 修改

阅读量520

点赞数

分类专栏： vue3源码 runtime-dom\src\index.ts 文章标签：前端 javascript vue.js

于 2022-07-14 15:24:42 首次发布

本文链接：https://blog.csdn.net/qq_38862234/article/details/125784567

版权

vue3源码同时被 2 个专栏收录

18 篇文章 1 订阅

订阅专栏

runtime-dom\src\index.ts

5 篇文章 0 订阅

订阅专栏

本文介绍如何在前端开发中合理使用`normalizeContainer`函数，处理DOM元素和ShadowRoot，确保组件正确挂载并处理可能的错误。特别关注了字符串查询目标元素和ShadowRoot的模式检查。

摘要由CSDN通过智能技术生成

normalizeContainer

如果参数 container 是 dom 元素直接返回；如果是字符串通过querySelector 转为 dom 后返回。

function normalizeContainer(
  container: Element | ShadowRoot | string
): Element | null {
  if (isString(container)) {
    const res = document.querySelector(container)
    if (__DEV__ && !res) {
      warn(
        `Failed to mount app: mount target selector "${container}" returned null.`
      )
    }
    return res
  }
  if (
    __DEV__ &&
    window.ShadowRoot &&
    container instanceof window.ShadowRoot &&
    container.mode === 'closed'
  ) {
    warn(
      `mounting on a ShadowRoot with \`{mode: "closed"}\` may lead to unpredictable bugs`
    )
  }
  return container as any
}