`))),mdx("p",null,"To make a piece of HTML interactive"),mdx(StepHead,{mdxType:"StepHead"},mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-html",metastring:"index.html focus=11:19","index.html":!0,focus:"11:19"}),`

`))),mdx("p",null,"you need to create a controller class"),mdx(StepHead,{mdxType:"StepHead"},mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-html",metastring:"index.html focus=7,9,14","index.html":!0,focus:"7,9,14"}),`

`))),mdx("p",null,"and link an element to the controller with the data-controller attribute."),mdx(StepHead,{mdxType:"StepHead"},mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-html",metastring:"index.html focus=8","index.html":!0,focus:"8"}),`

`))),mdx("p",null,"You can use the data-action attribute for example to handle click events"),mdx(StepHead,{mdxType:"StepHead"},mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-html",metastring:"index.html focus=8[35:47],18:20","index.html":!0,focus:"8[35:47],18:20"}),`

`))),mdx("p",null,"specifying the name of the controller and the method, Stimulus will call that method on every click."),mdx(StepHead,{mdxType:"StepHead"},mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-html",metastring:"index.html focus=18:23","index.html":!0,focus:"18:23"}),`

`))),mdx("p",null,"To add state, you can add a property to the controller"),mdx(StepHead,{mdxType:"StepHead"},mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-html",metastring:"index.html focus=8,10,11,13","index.html":!0,focus:"8,10,11,13"}),`

`))),mdx("p",null,"To display it, first you need a reference to a DOM element"),mdx(StepHead,{mdxType:"StepHead"},mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-html",metastring:"index.html focus=10,21:23","index.html":!0,focus:"10,21:23"}),`

`))),mdx("p",null,"Stimulus calls those references targets"),mdx(StepHead,{mdxType:"StepHead"},mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-html",metastring:"index.html focus=21:23,24,26,27,28,30,31","index.html":!0,focus:"21:23,24,26,27,28,30,31"}),`

`))),mdx("p",null,"After you define the target, you can access the dom element as a controller property"),mdx(StepHead,{mdxType:"StepHead"},mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-html",metastring:"index.html focus=8:13,21:31","index.html":!0,focus:"8:13,21:31"}),""))),mdx("p",null,"Now, every time the state changes Stimulus re-renders the component. (show)"),mdx(StepHead,{mdxType:"StepHead"},mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-html",metastring:"index.html focus=7:14","index.html":!0,focus:"7:14"}),""))),mdx("p",null,"To have two of these buttons"),mdx(StepHead,{mdxType:"StepHead"},mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-html",metastring:"index.html focus=7:23","index.html":!0,focus:"7:23"}),`

`))),mdx("p",null,"You can duplicate the html, and reuse the controller"),mdx(StepHead,{mdxType:"StepHead"},mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-html",metastring:"index.html focus=7[34:62],15[34:64]","index.html":!0,focus:"7[34:62],15[34:64]"}),`

`))),mdx("p",null,"Then if you add an attribute"),mdx(StepHead,{mdxType:"StepHead"},mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-html",metastring:"index.html focus=15[34:64],30:32","index.html":!0,focus:"15[34:64],30:32"}),`

`))),mdx("p",null,"and declare it as a value in the controller"),mdx(StepHead,{mdxType:"StepHead"},mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-html",metastring:"index.html focus=30:32,36,38:41,43:45","index.html":!0,focus:"30:32,36,38:41,43:45"}),`

`))),mdx("p",null,"you can access it as a controller property, similar to targets."))}MDXContent.isMDXComponent=!0;