Start Free Tier

Web Components

What Are Web Components?

Web components are browser-native APIs for creating custom HTML elements. When you render <sf-fastpoll>, the browser treats it like any other native element.

Three browser standards make this possible:

  • Custom Elements let you register new tag names like <sf-fastpoll> that browsers recognise and render
  • Shadow DOM gives each component its own isolated DOM tree, so its styles don't leak into your page and your styles don't break the component
  • HTML Templates provide reusable markup that the component renders efficiently

Because this is a browser standard, integration is not tied to one framework.

Why This Matters for Surveys

  • Works in any framework

    React, Vue, Angular, Svelte, and plain HTML all use the same component.

  • Styles stay contained

    Shadow DOM keeps survey styles isolated from your global CSS.

  • Small and fast

    Components are lightweight and load quickly.

  • Built on standards that last

    Web components are stable browser standards supported across major browsers.

Embedding SenseFolks Surveys

Plain HTML

html 
<!-- Load the component -->
<script type="module" src="https://unpkg.com/@sensefolks/fastpoll"></script>

<!-- Use it like any HTML element -->
<sf-fastpoll survey-key="your-uuid"></sf-fastpoll>

React

jsx 
import '@sensefolks/fastpoll';

function Survey() {
  return <sf-fastpoll survey-key="your-uuid" />;
}

Vue 3

vue 
<template>
  <sf-fastpoll survey-key="your-uuid" />
</template>

<script setup>
import '@sensefolks/fastpoll';
</script>

Angular

Angular needs one extra line to tell its compiler about custom elements:

typescript 
// app.module.ts
import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
import '@sensefolks/fastpoll';

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})

Passing Data: Attributes vs Properties

You can configure survey components two ways. HTML attributes use kebab-case. JavaScript properties use camelCase. Both set the same values.

HTML Attributes

html 
<sf-fastpoll 
  survey-key="abc123" 
  completion-message="Thanks!">
</sf-fastpoll>

JavaScript Properties

javascript 
const poll = document.querySelector('sf-fastpoll');
poll.surveyKey = 'abc123';
poll.completionMessage = 'Thanks!';

Listening for Events

SenseFolks components fire custom events when things happen, like a survey being submitted or finishing its initial load. You listen for them the same way you'd listen for a click:

javascript 
const poll = document.querySelector('sf-fastpoll');

poll.addEventListener('sfSubmit', (event) => {
  console.log('Survey submitted:', event.detail);
});

poll.addEventListener('sfReady', (event) => {
  console.log('Survey ready:', event.detail);
});

How They're Built

Under the hood, SenseFolks components are compiled with Stencil to generate standards-compliant web components. If you're curious, it gives us:

  • TypeScript for type safety
  • Lazy loading so you only download what you need
  • Virtual DOM for efficient re-renders
  • Server-side rendering support
  • Automatic polyfills for older browsers

Next Steps