Styling

Neighborhood is built using Web Components or custom HTML elements that can be used anywhere. Additionally Neighborhood makes use of a Shadow DOM to encapsulate styling.
Because of this encapsulation you can’t target styling of the internal elements using traditional CSS selectors.

CSS Parts

To get around this Neighborhood makes use of the CSS part selector ::part().
To use the CSS part selector you enter the Web Component tag followed by ::part(), and in the part parentheses enter the part name with no quotes.

For example if you wanted to style the title part of a component named nbhd-component, you would use the following selector to adjust styling.

nbhd-component::part(title) {
  /*  */
}

Each component will have documentation on what are the available parts listed under the CSS Parts section.

CSS Properties

The other styling ability is through CSS Custom Properties
or sometimes referred to as CSS variables. Neighborhood CSS Properties are prefixed with --nbhd- followed by the of the component and the property.
Component and property names are camelCase separated by - hyphens.

One caveat with CSS Properties is they have to be used within a selector and not isolated.

/* bad - won't work */
--nbhd-component-fontSize: 20px;

/* good - under the root selector */
:root {
  --nbhd-component-fontSize: 20px;
}

/* better - under the appropriate selector  */
nbhd-component {
  --nbhd-component-fontSize: 20px;
}

You can also reference other CSS Properties like styling properties that are available as part of the Neighborhood foundations.

nbhd-component {
  --nbhd-component-fontSize: var(--nbhd-fontSize-md);
}

Most styling properties that are used have exposed CSS Properties. Each component will have documentation on what are the available CSS Properties listed under the CSS Properties section.

Logical Properties and values

Most of the styling in Neighborhood makes use of CSS logical properties and values.
Logical properties and values are useful to style for multiple languages to logical dimensions as opposed to physical. When styling with logical properties and values you are working with Block and Inline
instead of top/bottom and left/right.