Open Dashboard →

CSS Parts

CSS Parts let you style specific elements inside web components from your external stylesheets. Customize every aspect of SenseFolks surveys to match your brand without fighting Shadow DOM encapsulation.

What are CSS Parts?

Web components use Shadow DOM to encapsulate their styles, which normally prevents your CSS from reaching inside them. CSS Parts solve this by exposing specific elements for external styling.

Think of CSS Parts as "styling hooks" — designated points where you can apply your own styles without breaking the component's internal structure or functionality.

CSS ::part() Syntax

Use the ::part() pseudo-element to target exposed parts:

css 
/* Target a specific part by name */
sf-fastpoll::part(button) {
  background: #007bff;
  color: white;
}

/* Target multiple parts with the same styles */
sf-fastpoll::part(heading),
sf-fastpoll::part(subheading) {
  font-family: 'Georgia', serif;
}

Common CSS Parts (All Components)

All SenseFolks survey components expose these common parts for consistent styling across your site:

Part Name Description
survey-container Main wrapper element
heading Primary headings and titles
subheading Secondary headings
button All button elements
next-button Next/Submit buttons specifically
back-button Back/Previous buttons
input Text input fields
form-field Form field containers
form-label Form labels
error-message Validation error messages
progress Progress indicators

Styling Examples

Brand Colors

css 
/* Apply your brand colors */
sf-fastpoll::part(button) {
  background: var(--brand-primary);
  border: none;
  border-radius: 8px;
}

sf-fastpoll::part(heading) {
  color: var(--brand-dark);
}

Custom Typography

css 
/* Use your brand fonts */
sf-userchoice::part(survey-container) {
  font-family: 'Inter', sans-serif;
}

sf-userchoice::part(heading) {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

Dark Mode

css 
/* Dark mode styling */
@media (prefers-color-scheme: dark) {
  sf-pricepoint::part(survey-container) {
    background: #1a1a1a;
    color: #ffffff;
  }

  sf-pricepoint::part(input) {
    background: #2d2d2d;
    border-color: #404040;
    color: #ffffff;
  }
}

Focus States

css 
/* Custom focus indicators */
sf-openfeedback::part(input):focus {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

sf-openfeedback::part(button):focus-visible {
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

Component-Specific Parts

sf-fastpoll

css 
sf-fastpoll::part(choices-container) {
  /* Container for poll options */
}
sf-fastpoll::part(choice-option) {
  /* Individual choice items */
}

sf-userchoice

css 
sf-userchoice::part(concept) {
  /* Choice concept cards */
}
sf-userchoice::part(concept-selected) {
  /* Selected state */
}

sf-pricepoint

css 
sf-pricepoint::part(price-input) {
  /* Price input field */
}
sf-pricepoint::part(currency-symbol) {
  /* Currency indicator */
}

sf-featurepriority

css 
sf-featurepriority::part(ranking-item) {
  /* Draggable ranking items */
}
sf-featurepriority::part(rank-number) {
  /* Position numbers */
}

sf-openfeedback

css 
sf-openfeedback::part(textarea) {
  /* Open text areas */
}
sf-openfeedback::part(character-count) {
  /* Character counter */
}

CSS Parts Best Practices

  • ✅
    Use CSS custom properties for theming

    Define variables like --brand-primary for easy theme switching across all surveys

  • ✅
    Maintain accessibility standards

    Keep sufficient color contrast (4.5:1 for text) and visible focus states

  • ✅
    Test across browsers

    CSS Parts are well-supported in modern browsers but verify your custom styles

  • ⚠️
    Avoid overriding layout properties

    Don't change display, position, or flex properties that may break component functionality

Browser Support

CSS Parts are supported in all modern browsers:

Browser Version
Chrome73+
Firefox72+
Safari13.1+
Edge79+

Next Steps