The settings module (@polymer/polymer/lib/utils/settings.js) exports setter functions for a few global configuration properties.

Each setting is exposed as a (read-only) property on the module. You can set a property by calling its associated setter. Settings should generally be set before creating any elements.

For example:

// Import settings module
import * as settings from '@polymer/polymer/lib/utils/settings.js';

// Update the setting
settings.setRootPath('/');

// Read the setting
console.log(settings.rootPath);

// Import elements that use Polymer
import 'my-app.js';

You can also import individual setters from the module:

import {setRootPath} from '@polymer/polymer/lib/utils/settings.js';
Property/Setter Description
rootPath
setRootPath
Sets a global rootPath property that can be used in templates to generate URLs that are relative to the application root.
sanitizeDOMValue
setSanitizeDOMValue
A global callback used to sanitize any value before inserting it into the DOM. The callback signature is:
function(value, name, type, node) { ... }

Where:

  • value is the value to sanitize.
  • name is the name of an attribute or property (for example, href).
  • type indicates where the value is being inserted: one of property, attribute, or text.
  • node is the node where the value is being inserted.
passiveTouchGestures
setPassiveTouchGestures
Global flag. If `true`, forces all gesture listeners to be passive. See Setting passive touch gestures for more details.

There are also a number of polyfill-specific settings. See Polyfills for details.

Call setPassiveTouchGestures(true) to force all event listeners for gestures to be passive. Passive event listeners can't call preventDefault to prevent the default browser handling, so the browser can handle the native gesture without waiting for the event listener to return.

You must call setPassiveTouchGestures before adding any gesture event listeners—for example, by setting it in the application entrypoint, or in the constructor of your main application element (assuming that's always the first element to load).

Using passive touch gestures may improve scrolling performance, but will cause problems if any of the elements in your application depend on being able to call preventDefault on a gesture.

Set passive touch gestures from the app shell

import {PolymerElement} from '@polymer/polymer/polymer-element.js';
import {setPassiveTouchGestures} from '@polymer/polymer/lib/utils/settings.js';

class MyApp extends PolymerElement {
  constructor(){
    super();
    // Set passive gestures globally for all elements using Polymer gestures
    setPassiveTouchGestures(true);
    // Set root path globally
    setRootPath("/endpoint/");
    //
  }
}

Set passive touch gestures from the app entrypoint

<head>
  <script type="module">
    import {setPassiveTouchGestures} from '@polymer/polymer/lib/utils/settings.js';
    setPassiveTouchGestures(true);
  </script>
  <script type="module" src="my-app.js"></script>
  ...
</head>