npm 包 @lwc/synthetic-shadow 使用教程-JavaScript中文网-JavaScript教程资源分享门户

什么是 @lwc/synthetic-shadow

@lwc/synthetic-shadow 是轻量级 Web Components 导入的一个 npm 包，用于构建自定义元素的可复用组件。Synthetic Shadow 是一种轻量级的 Web Components 封装技术，它可以将 DOM 结构与样式信息完全包含在组件的封装中，防止其样式与功能与外部环境的样式发生不必要的冲突。

Synthetic Shadow 和其他 Web Components 封装技术相比具有以下优势：

轻量级，没有引入耗费较大的 Polyfill
支持自定义可继承的 CSS 属性来提高复用性
更好的样式隔离性
更好的性能

安装和使用 @lwc/synthetic-shadow

@lwc/synthetic-shadow 可以通过 npm 包管理器获取，只需要简单的通过命令行安装即可：

npm install @lwc/synthetic-shadow

在你的项目中使用 Synthetic Shadow 模板需要引入这个包：

import { createElement } from 'lwc';
import { applyPolyfills, defineCustomElements } from '@lwc/synthetic-shadow';

在另外的代码块中，你需要开始引用当前组件：

applyPolyfills().then(() => defineCustomElements(window));

Synthetic Shadow API

每个组件都包含一个 ShadowRoot 节点，所有的子组件或元素都在其中运行。这个 ShadowRoot 是通过 VirtualDom 与实际 DOM 近似实现的，具有极高效率的性能表现。

CSS

在 Synthetic Shadow 中，所有的样式都定义在 `` 元素上，这样就可以确保其样式不会被外部环境污染。在传统的 CSS 中，同名选择器会形成全局样式，很容易导致问题的发生，并且在特殊情况下也很难调试。

HTML

所有的组件都在 ShadowRoot 内部运行，因此也就意味着他们的结构并不需要全局可见。从某种意义上来说，这使得其可以成为另一种应用程序架构的概念，在通过服务端渲染的情况下适用于数据驱动的应用程序。

Props

可以在组件中与外部环境交互的唯一方式是通过 props 属性。这些属性可以被传递得从父级组件到子级组件，并且其值可以跨越不同的组件传递。这个相当于定义了一个上下文的对象，可以让组件内部使用。

示例代码

例如，以下组件展示了 @lwc/synthetic-shadow 的基本用法。

<template>
  <div class="mysterious-div">
    {{ computedValue }}
  </div>
</template>

-- -------------------- ---- -------
------ - ----------------- --- - ---- ------

------ ------- ----- ----------- ------- ---------------- -
    ---- -------------
    
    --- --------------- -
      ------ ----------------- - - --------
    -
-展开代码

如果你想使用这个组件，则可以将它插入到外部元素中。

<my-component some-variable="hello"></my-component>

这会生成以下内容：

<div class="my-component-11">
  <div class="mysterious-div">
    hello world!
  </div>
</div>

总结

@lwc/synthetic-shadow 有以下特点：

轻量级
更好的样式隔离性
更好的性能

本教程介绍了如何将 Synthetic Shadow 集成到现有 Element-based Web Components 应用程序中以及如何从头开始建立 Synthetic Shadow-backed 应用程序。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/114014

npm 包 @lwc/synthetic-shadow 使用教程