<style> Tag Not Allowed in Components

You can’t add a <style> tag in component markup or when you dynamically create a component in JavaScript code. This restriction ensures better component encapsulation and prevents component styling interfering with the styling of another component.

The <style> tag restriction applies to components with API version 42.0 or later.

Define component styles only in the style resource in a component bundle. All top-level elements in a component have a special THIS CSS class added to them. The THIS class effectively adds namespacing to CSS and prevents one component’s CSS from overriding another component’s styling.