标签: stenciljs

我熟悉Angular并了解React的基础知识.我正在探索模板文档,我发现模板组件有@Component装饰器和render()功能 -

component.tsx

import { Component, Prop } from '@stencil/core';

@Component({
    tag: 'my-first-component',
    styleUrl: 'my-first-component.scss'
})
export class MyComponent {
    // Indicate that name should be a public property on the component
    @Prop() firstName: string;

    render() {
        return (
            <p>
            My name is {this.firstName}
            </p>
        );
    }
} 

帮助我理解它与角度和反应有何不同以及它是如何工作的？

我正在尝试将Stencil和Storybook整合到同一个项目中.我一直在关注这个设置向导和这一个但是的步骤之一是组件库中发布到NPM和这不是我想要的.

我有这个我用组件库(文件夹)配置的repo,src以及那些带有Storybook的组件的审阅者,它位于该storybook文件夹中.

问题是,当我使用模板编译组件和复制dist文件夹中的故事书应用程序内并导入组件没有渲染.使用自定义头标签调整配置我能够正确导入它,但是没有应用任何样式.

当我打开网络面板时,导入组件时出现一些错误:

因此,组件存在于DOM中,但可见性设置为隐藏,我认为它在出现错误时会执行.

这是组件au-button:

import { Component } from '@stencil/core';

@Component({
  tag: 'au-button',
  styleUrl: 'button.css',
  shadow: true
})
export class Button {
  render() {
    return (
      <button class="test">Hello</button>
    );
  }
}

这是我的组成部分的故事:

import React from 'react';
import { storiesOf } from '@storybook/react';

import '../components/components.js'

storiesOf('Button', module)
  .add('with text', () => <au-button></au-button>)

这些是Storybook应用程序中的脚本:

"scripts": {
    "storybook": "start-storybook …

在 Nuxt 2 中，我可以通过利用 Stencil 包中提供的 renderToString() 方法并结合 Nuxt 钩子来使用服务器端渲染的 Stencil 组件，如下所示：

import { renderToString } from '[my-components]/dist-hydrate'

export default function () {
  this.nuxt.hook('generate:page', async (page) => {
    const render = await renderToString(page.html, {
      prettyHtml: false
    })
    page.html = render.html
  })
}

自从Stencil 2.16.0最近发布以来，我能够在由 Vite 提供支持的 Nuxt 3 中使用本机 Web 组件。然而我还没有找到一种方法来连接模板水合过程。不幸的是，还没有关于可组合useHydration()的文档。

有谁知道我如何让它在 Nuxt 3 中工作？

我今天从模板开始。以下代码是我项目中的全部代码。文档说，如果 Component 修饰的成员@state()发生变化，组件将重新渲染。

对@State() 属性的任何更改都将导致再次调用组件渲染函数。

但即使是这个简单的事情也行不通。请建议。

import {Component, State} from '@stencil/core';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true
})
export class MyComponent {

  @State() name:string = 'john';

  changeName(){
    this.name = "Peter";
    console.log('inside changeName');
  }

  render() {
    return <div>
      <p>{this.name}</p>
      <button onClick={this.changeName}>click</button>
    </div>;
  }
}

当我单击该按钮时会inside changeName被记录，但name在视图中看不到任何更改。

在 stencil's.js 中，类选择器的 TSX 元素属性是class而不是className（如在 React 中）。

在 VSCode 中找不到更改 emmet 扩展的类属性名称的方法。

尝试了 emmet 的偏好，但没有帮助。

typescript .st-form__upload

扩展到

<div className="st-form__upload"></div>

但是我需要

<div class="st-form__upload"></div>

有人有同样的问题吗？

我想知道Stencil JS是否会被用作开发Ionic移动应用程序的选项.

让我解释一下我所说的"发展选择".在NativeScript等其他框架中,您可以选择使用Angular + Typescript或Javascript 启动新项目.此外,还存在其他"选项"(例如,用于NativeScript的VueJS)

StencilJS是像Angular这样的现有javascript框架的有趣替代品,使用它构建Ionic应用程序会很棒.

现在,因为StencilJS框架是由Ionic框架团队创建的,我想知道是否有一天它可供所有Ionic开发人员使用,作为Angular的替代品.

我无法将自定义html内部的值渲染到元素中.例如:

this.title = 'Hello <b> stencil </b>'; << response value from an API 

捆绑:

<h1>{this.title}</h1>

我期待与JavaScript中的innerHtml行为相同的东西.

我想stencil在我的项目中使用一个库nuxt。

我能够让它工作，但是当vue组件在服务器端渲染时，我只能使stencil的组件在客户端渲染。

我认为最大的问题是需要defineCustomElement作为window参数。

我知道stencil.js“预渲染”在我的理解中基本上是 SSR，我想使用它以及Nuxt.jsSSR。

所以我的问题是：如何配置一个nuxt项目来支持服务器端渲染stencil.js？

我有一个使用自己的资产（图像）的模板组件。当我构建并发布到 npm 并将包安装到我的 React 应用程序中后，Stencil 组件中的资源将不再工作。React 尝试在 public 文件夹中找到它们，但它们不在那里：它们位于 node_modules\stencil_project_name\dist。

问题：处理这种情况的正确工作流程是什么？

我目前正在尝试使用StencilJS来创建一些Web组件.

现在我知道有<slot />和名称插槽和所有东西.来自React,我猜插槽与React中的儿童类似.你可以在React中使用孩子做很多事情.我经常做的事情:

1. 检查是否有儿童
2. 迭代孩子为每个孩子做一些事情(例如把它包装在一个带有班级的div中)

你会如何使用插槽/网络组件/ stencilJS？

我可以使用Stencil获取我的Web组件的主机元素

@Element() hostElement: HTMLElement;

我使用我的组件

<my-custom-component>
  <button>1</button>
  <button>2</button>
  <button>3</button>
</my-custom-component>

我想渲染类似的东西

render() {
  return slottedChildren ?
    <span>No Elements</span> :
    <ul class="my-custom-component">
      slottedChildren.map(child => <li class="my-custom-element>{child}</li>)
    </ul>;
}

亲切的问候