Skip to content

WebComponents

Jump to bottom
Philippe Marschall edited this page Jul 10, 2024 · 17 revisions

Seaside Components as Web Components

The Seaside WebComponents allows Seaside components to be embedded in non-Seaside web pages or web applications using Web Components.

To use a Seaside Web Component a web page or web application needs to include the JavaScript library from WAWebComponentsLibrary >> #seasideWebComponentsJs and then use the <wa-component> tag.

<html>
  <head>
    <!-- -->
    <script src="seaside-components.js" defer></script>
  </head>
  <body>
    <!-- -->
    <wa-component url="/examples/headless-counter">Loading...</wa-component>
    <!-- -->
  </body>
</html>

The url attribute of the <wa-component> tag needs to point a Seaside application that only renders the HTML of a component without any <html>, <head> or <body> elements. To achieve this the application can use WAFragmentRenderPhaseContinuation.

Sessions

We recommend you use the default WAQueryFieldHandlerTrackingStrategy session tracking strategy. This way every component will get its own session. As the components are embedded the user will not see the session key in the URL.

Page Refreshes

When an embeded component does a full page refresh a full page refresh of the containing page will result. If this is not wanted then the component needs to use Ajax or opt-in to ajaxification.

Ajaxification

Per default no ajaxification will happen so you have to make sure your component does not perform full page requests.

You can opt in to ajaxification using ajaxify="true"

<seaside-component url="/examples/headless-counter" ajaxify="true">Loading...</seaside-component>

The Seaside-WebComponents-Examples package shows you how can put all these things together.

Web Components in Seaside Applications

If you want to embed Web Components in Seaside applications we offer support for the <template> and <slot> elements as well as the slot attribute. You can then use the Canvas API to render the custom markup the specific component requires.

(html tag: 'sl-alert')
  attributeAt: 'open' put: true;
  with [
    (html tag: 'sl-icon')
      slot: 'icon';
      attributeAt: 'name' put: 'info-circle'.
    html text: 'This is a standard alert. You can customize its content and even the icon.' ]

Changelogs

Development

Documentation

Sprints

Clone this wiki locally