# Learn the basics of Moov Drops

Moov Drops are custom web components added to your page the same way you would add any HTML tag. Moov Drops are defined in the [Moov.js](https://docs.moov.io/moovjs) package. After [initializing](https://docs.moov.io/moovjs/installation) Moov.js, you will have access to our full library of Drops.

## Properties

You can configure a Drop via **properties** set through JavaScript. Properties can be accessed using a reference to the Drop's HTML element (`<moov-example-drop>` in this case).

### How to set a property

```js
const exampleDrop = document.querySelector('moov-example-drop');
exampleDrop.exampleProperty = 'example-value';
```

## Attributes

For your convenience, string-type properties can be set directly on the HTML element through a corresponding **attribute**. Properties are written in `camelCase`, while attributes are written in `kebab-case`.

### How to set an attribute

```html
<moov-example-drop
  example-property="example-value"
></moov-example-drop>
```

Attribute changes will always update the corresponding property. However, for performance reasons, property changes will **not** update the corresponding attribute.

## Methods

Some Drops expose functional properties called **methods**. You can call these methods to perform some action.

### How to call a method

```js
const exampleDrop = document.querySelector('moov-example-drop');
exampleDrop.exampleMethod('example-argument');
```

## Themes

You can customize the look and feel of Moov Drops by editing our pre-defined CSS variables. Read our [themes](https://docs.moov.io/moovjs/drops/theming/) guide to learn more.

## Content security policies

Drops are styled through inline stylesheets, loaded at runtime. This is necessary to achieve the [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM) architecture that keeps our styles from affecting your web page.

However, this approach can pose a problem for strict content security policies. To create a Drops-compatible CSP, you have two options, as laid out in the sections below.

### 1. Unsafe inline

The simplest solution is to relax your CSP by setting `style-src 'unsafe-inline'`. This poses a minor security risk related to unknown external stylesheets. Discuss this option with your security team.

### 2. Stylesheet Nonce

The safer, but more complex option is a **stylesheet nonce**:

1. Each time your web page loads, your server should generate a single-use nonce that can be used to mark stylesheets as safe.
2. Insert the nonce into your CSP with `style-src 'nonce-123abc...'`.
3. Before loading Moov Drops, call `window.moovDropsNonce = "123abc..."`, and that nonce will be applied to all Drops style elements.

Nonces do not apply to style attributes. Moov Drops still requires dynamically set style attributes, which you can allow in your CSP with `style-src-attr 'unsafe-inline'`.