Open Dashboard →

Web Components

SenseFolks survey components are built using Web Components — native browser APIs that create custom, reusable HTML elements. This means they work with any framework or no framework at all.

What are Web Components?

Web Components are browser-native technologies that let you create custom HTML elements with encapsulated functionality. They consist of:

  • Custom Elements — Define new HTML tags like <sf-fastpoll> that browsers recognize
  • Shadow DOM — Encapsulated DOM and styling that won't conflict with your app
  • HTML Templates — Reusable markup templates for efficient rendering

Why Web Components for Surveys?

  • 🌐
    Framework Agnostic

    Works identically with React, Vue, Angular, Svelte, or vanilla JavaScript — no wrappers needed

  • 📦
    Style Encapsulation

    Survey styles don't leak into your app, and your styles don't break the survey

  • ⚡
    Native Performance

    Built on browser APIs with no framework overhead — components are under 15KB gzipped

  • 🔄
    Future Proof

    Web standards supported by all browsers that will work for years without breaking changes

Using SenseFolks Components in Different Frameworks

Vanilla 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

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

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

Attributes vs Properties

Web components can receive data through HTML attributes or JavaScript properties:

HTML Attributes (kebab-case)

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

JavaScript Properties (camelCase)

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

Custom Events

SenseFolks components emit custom events that you can listen to for integration with your application:

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

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

poll.addEventListener('sf-complete', (event) => {
  console.log('Survey completed:', event.detail);
});

Built with Stencil

SenseFolks components are built with Stencil, a compiler that generates standards-compliant web components with:

  • 📘 TypeScript support
  • ⚡ Lazy loading
  • 🔄 Virtual DOM for efficient updates
  • 🖥️ Server-side rendering support
  • 🔧 Automatic polyfills for older browsers

Next Steps