Polaris web component and html tags

Hello everyone, I am creating a block for orders in which I want to display a timeline of changes. I found a ready-made component that uses Preact + HTML div tags with custom styling, but I noticed that tags that are not related to Preact are simply not displayed in the interface. Does anyone have a solution to this problem or anything else?

import { render } from "preact";



export default async () => {

  render(<Extension />, document.body);

};



function Extension() {

  return (

    <s-admin-block heading="My Block Extension">

      <div className={"test"}>test in div</div>

      <s-text>test in s-text</s-text>

    </s-admin-block>

  );

}

That is, the div simply disappears and no styles corresponding to it are applied.

Hi @Maksym_Kyrnyi

Shopify’s components like <s-layout>, <s-stack>, or <s-card> are designed to work within the admin UI’s shadow DOM. You can use one of those components instead of div. Refer to Using Polaris web components for components that can help you build the block for orders.