can-view-callbacks
Registered callbacks for behaviors
Object
Allows registering callback functions that will be called when tags and attributes are rendered in can-view-target.
Registering tags
callbacks.tag allows you to register a tag that custom behavior will be attached to.
This will style elements using the blue-el tag with a blue background.
import callbacks from "can-view-callbacks";
callbacks.tag( "blue-el", function( el ) {
el.style.background = "blue";
} );
<blue-el><p>Some content with a blue background, gross!</p></blue-el>
Registering attributes
Similarly you can register a callback for an attribute. Here we are using a regular expression to match an attribute that starts with foo-
:
callbacks.attr( /foo-[\w\.]+/, function( el, attrData ) {
// Get the part after foo-
const attrValue = attrData.attributeName.substr( 4 );
// Set it's content
el.textContent = attrValue;
} );
So that:
<div foo-bar></div>
Renders as:
<div foo-bar>bar</div>