如何在WordPress中使用通过npm构建的Lit Web Components？

第一步：打包你的Lit组件 #

先把npm里的Lit组件源码编译成浏览器可直接运行的文件：

• 如果你用的是Lit官方脚手架（create-lit），直接执行 npm run build，会在dist目录生成打包好的js文件（比如my-lit-component.js）。
• 自定义构建的话，用Rollup/Webpack配置输出为ES模块或UMD格式，确保依赖的Lit库要么打包进文件，要么后续单独引入。

方法一：手动通过主题加载组件 #

适合不想额外装插件的场景：

1. 上传组件文件：把打包好的my-lit-component.js传到WordPress主题的静态资源目录，比如wp-content/themes/你的主题/assets/js/，可以用FTP或后台媒体库上传后移动到对应目录。
2. 在主题中注册脚本：打开主题的functions.php，添加以下代码注册并加载组件：

function enqueue_my_lit_component() {
    // 注册并加载组件脚本
    wp_enqueue_script(
        'my-lit-component',
        get_template_directory_uri() . '/assets/js/my-lit-component.js',
        array(),
        '1.0.0', // 版本号，可按需修改
        true // 放在页面底部加载，优化性能
    );
    // 标记为ES模块（如果组件是ES模块格式）
    wp_script_add_data( 'my-lit-component', 'type', 'module' );

    // 若组件未打包Lit库，需单独引入Lit的CDN版本
    wp_enqueue_script(
        'lit',
        'https://cdn.jsdelivr.net/npm/lit@3.0.0/index.js',
        array(),
        '3.0.0',
        true
    );
    wp_script_add_data( 'lit', 'type', 'module' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_my_lit_component' );

3. 使用组件：在文章、页面或主题模板里，直接写自定义标签即可，比如：

<my-lit-component title="自定义标题" desc="这是一个Lit组件示例"></my-lit-component>

方法二：制作Gutenberg自定义区块（编辑器可视化插入） #

想在WordPress编辑器里便捷插入组件的话，可以做个自定义区块：

1. 创建区块脚本：在主题目录新建blocks/lit-component-block.js，编写区块注册代码：

wp.blocks.registerBlockType('my-theme/lit-component-block', {
    title: 'Lit 自定义组件',
    icon: 'editor-code',
    category: 'design',
    attributes: {
        title: { type: 'string', default: '默认标题' }
    },
    edit: (props) => {
        // 编辑器预览
        return wp.element.createElement('my-lit-component', {
            title: props.attributes.title
        });
    },
    save: (props) => {
        // 前端渲染的内容
        return wp.element.createElement('my-lit-component', {
            title: props.attributes.title
        });
    }
});

2. 加载区块脚本：在functions.php中添加代码，确保编辑器加载该区块，同时加载Lit组件：

function enqueue_lit_block_assets() {
    // 加载区块脚本
    wp_enqueue_script(
        'lit-component-block',
        get_template_directory_uri() . '/blocks/lit-component-block.js',
        array('wp-blocks', 'wp-element'),
        '1.0.0',
        true
    );
    // 加载Lit组件（复用方法一中的enqueue_my_lit_component函数即可）
    enqueue_my_lit_component();
}
add_action( 'enqueue_block_editor_assets', 'enqueue_lit_block_assets' );

3. 使用区块：打开Gutenberg编辑器，在区块列表里找到「Lit 自定义组件」，插入后可在右侧面板修改属性，前端会自动渲染组件。

方法三：用自定义插件加载（不依赖主题） #

适合切换主题不想重新配置的场景：

1. 创建插件文件：在wp-content/plugins/目录新建lit-components-loader文件夹，里面创建lit-components-loader.php：

<?php
/*
Plugin Name: Lit组件加载器
Description: 加载自定义Lit Web Components
Version: 1.0.0
*/

function enqueue_lit_component_via_plugin() {
    wp_enqueue_script(
        'my-lit-component',
        plugin_dir_url(__FILE__) . 'assets/my-lit-component.js',
        array(),
        '1.0.0',
        true
    );
    wp_script_add_data( 'my-lit-component', 'type', 'module' );

    // 按需引入Lit库
    wp_enqueue_script(
        'lit',
        'https://cdn.jsdelivr.net/npm/lit@3.0.0/index.js',
        array(),
        '3.0.0',
        true
    );
    wp_script_add_data( 'lit', 'type', 'module' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_lit_component_via_plugin' );

2. 上传组件文件：在插件目录里新建assets文件夹，把打包好的my-lit-component.js放进去。
3. 激活插件：在WordPress后台插件列表找到「Lit组件加载器」并激活，之后就可以在页面/文章里直接使用组件标签。

注意事项 #

• 浏览器兼容性：现代浏览器原生支持Web Components，若需兼容旧浏览器（如IE11），需额外引入Web Components Polyfill。
• 组件属性：如果组件接受动态数据，可通过WordPress的模板标签传递，比如<my-lit-component title="<?php echo get_the_title(); ?>"></my-lit-component>。

内容的提问来源于stack exchange，提问作者Abid Ali