@lrnwebcomponents/to-element
v4.0.25
Published
Replicate any DOM node passed in and turn it into a web component
Downloads
81
Readme
<to-element>
Element
Replicate any DOM node passed in and turn it into a web component
Bookmarklet usage
- Go to a web page
- Click on your bookmarklet (copy the content below into that bookark)
- It will tell you what its going to do, hit ok.
- Hover over areas on the page to see the outline of it
- Click on the thing you want to turn into a web component
- fill in a valid name for a component (like: twitter-card or my-home-block)
- hit ok and it'll download. You now have a Polymer based web component that should look VERY similar to the page area you clicked
- Use this to learn from and put it into other websites
Copy the following into a bookmark
javascript:(function(){window.__haxClickEvent=(e)=>{if(e.target.tagName!=='TO-ELEMENT'){e.preventDefault();e.stopPropagation();e.stopImmediatePropagation();if(!window.__first){alert('You\'ll now be asked to name this element. Make sure the element name has a hypthen in it like "cool-new-things".');window.__first=true;}let name=prompt('Name for this element:','cool-new-thing');if(name){e.target.classList.remove('hax-injected-highlighter');document.getElementById('haxallthethings').downloadNewComponent(e.target,name);}else{document.body.removeEventListener('click',window.__haxClickEvent);document.body.removeEventListener('mouseover',function(e){e.target.classList.add('hax-injected-highlighter');});document.body.removeEventListener('mouseout',function(e){e.target.classList.remove('hax-injected-highlighter');});}}};let link=document.createElement('script');link.type="module";link.src="https://cdn.waxam.io/build/es6/node_modules/@lrnwebcomponents/to-element/to-element.js";document.body.appendChild(link);let toE=document.createElement('to-element');toE.setAttribute('id','haxallthethings');document.body.appendChild(toE);let style=document.createElement('style');style.innerHTML=`.hax-injected-highlighter{outline:4px dotted #34e79a!important;outline-offset:4px!important;}`;document.body.appendChild(style);alert('Welcome to HAX Element creator. To get started, click on the thing you want to make a new element.');document.body.addEventListener('click',window.__haxClickEvent);document.body.addEventListener('mouseover',function(e){e.target.classList.add('hax-injected-highlighter');});document.body.addEventListener('mouseout',function(e){e.target.classList.remove('hax-injected-highlighter');});})();
Usage
To use this web component in your project you can utilize one of the following styles of syntax.
/* In an existing JS module / web component */
import '@lrnwebcomponents/to-element/to-element.js';
/* At top of an application with build routine */
<script type="module" src="@lrnwebcomponents/to-element/to-element.js"></script>
/* Alternatives for top of application */
<script type="module">
import '@lrnwebcomponents/to-element/to-element.js';
// imperative form
import {ToElement} from '@lrnwebcomponents/to-element';
// if you don't have a build routine and need to reference directly
import './node_modules/@lrnwebcomponents/to-element/to-element.js';
</script>
// via unpkg CDN (good for testing)
<script type="module" src="https://unpkg.com/@lrnwebcomponents/to-element/to-element.js"></script>
Develop / Demo
Run yarn start
will start a local development server, open your default browser to display it, open your finder to the correct window and start watching the /src
directory for changes and automatically rebuilding the element and documentation site for the demo.
$ yarn start
Test
$ yarn run test
Build
Builds ensure that wcfactory can correctly compile your web component project to work on the maximum number of browsers possible.
$ yarn run build
Contributing
- Fork it!
git clone https://github.com/elmsln/lrnwebcomponents.git
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -m 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request :D
Code style
Element (and all lrnwebcomponents) use Prettier to auto-format JS and JSON. The style rules get applied when you commit a change. If you choose to, you can integrate your editor with Prettier to have the style rules applied on every save.