` element.\n\n#### Accessing the component instance\n\nWhen `mdc-auto-init` attaches a component to an element, it assign that instance to the element\nusing a property whose name is the value of `data-mdc-auto-init`. For example, given\n\n```html\n
\n```\n\nOnce `mdc.autoInit()` is called, you can access the component instance via an `MDCTextField`\nproperty on that element.\n\n```js\ndocument.querySelector('.mdc-text-field').MDCTextField.disabled = true;\n```\n\n#### Calling subsequent `mdc.autoInit()`\n\nIf you decide to add new components into the DOM after the initial `mdc.autoInit()`, you can make subsequent calls to `mdc.autoInit()`. This will not reinitialize existing components. This works since mdc-auto-init will add the `data-mdc-auto-init-state=\"initialized\"` attribute, which tracks if the component has already been initialized. After calling `mdc.autoInit()` your component will then look like:\n\n```html\n
\n ...\n
\n```\n\n### Using as a standalone module\n\n#### Registering Components\n\nIf you are using `mdc-auto-init` outside of `material-components-web`, you must manually provide a\nmapping between `data-mdc-auto-init` attribute values and the components which they map to. This can\nbe achieved via `mdcAutoInit.register`.\n\n```js\nimport mdcAutoInit from '@material/auto-init';\nimport {MDCTextField} from '@material/textfield';\n\nmdcAutoInit.register('MDCTextField', MDCTextField);\n```\n\n`mdcAutoInit.register()` tells `mdc-auto-init` that when it comes across an element with a\n`data-mdc-auto-init` attribute set to `\"MDCTextField\"`, it should initialize an `MDCTextField`\ninstance on that element. The `material-components-web` package does this for all components for\nconvenience.\n\nAlso note that a component can be mapped to any string, not necessarily the name of its constructor.\n\n```js\nimport mdcAutoInit from '@material/auto-init';\nimport {MDCTextField} from '@material/textfield';\n\nmdcAutoInit.register('My amazing text field!!!', MDCTextField);\n```\n\n```html\n
\n \n
\n\n```\n\n### De-registering components\n\nAny component can be deregistered by calling `mdcAutoInit.deregister` with the name used to register\nthe component.\n\n```js\nmdcAutoInit.deregister('MDCTextField');\n```\n\nThis will simply remove the name -> component mapping. It will _not_ affect any already-instantiated\ncomponents on the page.\n\nTo unregister all name -> component mappings, you can use `mdcAutoInit.deregisterAll()`.\n\n## How `mdc-auto-init` works\n\n`mdc-auto-init` maintains a registry object which maps string identifiers, or **names**, to\ncomponent constructors. When the default exported function - `mdcAutoInit()` - is called,\n`mdc-auto-init` queries the DOM for all elements with a `data-mdc-auto-init` attribute. For each\nelement returned, the following steps are taken:\n\n1. If the `data-mdc-auto-init` attribute does not have a value associated with it, throw an error\n2. If the value of `data-mdc-auto-init` cannot be found in the registry, throw an error\n3. If the element has an existing property whose name is the value of `data-mdc-auto-init`, it is\n assumed to have already been initialized. Therefore it is skipped, and a warning will be logged\n to the console (this behavior can be overridden).\n4. Let `Ctor` be the component constructor associated with the given name in the register\n5. Let `instance` be the result of calling `Ctor.attachTo()` and passing in the element as an\n argument.\n6. Create a non-writable, non-enumerable property on the node whose name is the value of\n `data-mdc-auto-init` and whose value is `instance`.\n\n### Initializing only a certain part of the page\n\nBy default, `mdc-auto-init` will query the entire document to figure out which components to\ninitialize. To override this behavior, you can pass in an optional `root` first argument specifying\nthe root node whose children will be queried for instantiation.\n\n```html\n
\n \n
\n\n```\n\nIn the above example, only elements within `
` will be queried.\n\n### Calling autoInit() multiple times\n\nBy default, `mdc-auto-init` only expects to be called once, at page-load time. However, there may be\ncertain scenarios where one may want to use `mdc-auto-init` and may still need to call it multiple\ntimes, such as on a Wordpress site that contains an infinitely-scrolling list of new blog post\nelements containing MDC Web components. `mdcAutoInit()` takes an optional second argument which is the\nfunction used to warn users when a component is initialized multiple times. By default, this is just\n`console.warn()`. However, to skip over already-initialized components without logging a\nwarning, you could simply pass in a nop.\n\n```html\n\n```\n\nThis will suppress any warnings about already initialized elements.\n\n### Events\n\n#### MDCAutoInit:End\nTriggered when initialization of all components is complete.\n\n`document.addEventListener(\"MDCAutoInit:End\", () => {...});`\n","gitHead":"edc72a4d7d6a61d61620fd05a80e2491e518bccf","license":"MIT","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"homepage":"https://github.com/material-components/material-components-web#readme","repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-auto-init"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"Declarative, easy-to-use auto-initialization for Material Components for the web","directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/base":"^4.0.0-canary.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/auto-init_4.0.0-canary.1_1568060433788_0.22483855769873928","host":"s3://npm-registry-packages"},"_id":"@material/auto-init@4.0.0-canary.1","version":"4.0.0-canary.1"}