The default scope of the search-box widget overrides the complete DOM output of the widget.
When you implement this slot, none of the other slots will change the output as the default slot surrounds them.
This means you can no longer use the reset-icon slot to override the DOM output of the reset icon. So how do you change reset icon?
When using the default scope, the "X" reset-icon you see is coming from the browser, and is added to <input type="search">. One way to remove it for Chrome is with the following CSS:
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
-webkit-appearance:none;
}Alternately, you can set the type to text rather than search.
To add a custom button, you can add a button in the slot that clears the query as shown in this sandbox.